用CSS实现垂直居中的4种方法

时间：2023-03-30 22:24:20 CSS

行高line-height实现单行文字的垂直居中以前一直认为单行文字的垂直居中应该把height和lineheight设置成一样的值，但高度实际上是不必要的。事实上，文本本身以一行为中心。在没有设置高度的情况下，行高被拉伸。testtext

setvertical-align:middle实现垂直居中[1]设置父元素的显示是table-cell。通过为table-cell元素设置vertical-align:middle，所有的子元素都可以垂直居中。这个类似于表格单元格的垂直居中[注意]如果IE7-浏览器支持，可以改成表格结构[注意]设置为table-cell的div不能使用浮动或绝对定位，因为浮动或绝对定位会使元素具有块级元素特性，从而失去table-cell元素的垂直对齐功能。如果需要浮动或者绝对定位处理，需要在外面再放一层div。

我有点长有点长有点长有点长测试文字[2]如果子元素是图片，通过设置父元素line-height而不是height，并将父元素的font-size设置为0。vertical-align:middle的解释是元素的垂直点对齐父元素的基线加上1/2中字母X的高度父元素。因为字符X在em框中没有垂直居中，而且各个字体中字符X的高度不一致。因此，当字体较大时，差异会更加明显。当font-size为0时，相当于把字符X的字号设置为0，这样就可以实现完全垂直居中。

【3】垂直居中的效果是通过添加元素来实现。新元素的高度设置为父元素的高度，宽度为0，同时inline-block元素也设置为垂直居中vertical-align:middle。由于解析了两个元素之间的空格，需要在parent级别设置font-size:0，然后在child级别设置font-size为需要的值；如果结构要求不严格，两个元素可以排成一行，不需要设置font-size:0。

我是比较长比较长的多行文字思路三：通过绝对定位实现垂直居中【1】如果子元素是不确定高，使用top50%配合translateY(-50%)达到居中效果。translate函数的百分比是相对于自身高度的，所以top:50%和translateY(-50%)可以达到居中的效果。[注意]IE9-浏览器不支持；【注意】如果知道子元素的高度，translate()函数也可以换成margin-top：一个负的高度值。

测试文本[2]如果子元素设置了高度，结合绝对定位Model属性的box实现居中效果

测试text<关于添加div分层描述>水平居中对齐，在元素外层放置一层div并设置absolute，负margin-left或relative负left属性在元素上设置，实现水平居中的效果。但是由于margin是相对于包含块的宽度的，所以margin-top:-50%得到的是宽度，而不是-50%的高度，所以不可行；对于相对百分比值，包含块的高度为auto在chrome中，safari和IE8+浏览器不支持设置元素的百分比top值，所以不可行。思路四：利用弹性盒模型flex实现垂直居中【注】IE9-浏览器不支持【1】在弹性容器上设置侧轴对齐align-items:center

测试文字【2】设置margin:auto0

测试文本

上一篇：十分钟看懂JS原型和原型链

下一篇：前端资源收集

用CSS实现垂直居中的4种方法相关文章