CSS中垂直居中的方法

昨天总结了css中水平居中的方法，今天来总结一下css中实现垂直居中的方法。

• line-height

line-height用于实现单行文本的垂直居中，如下图中，我们要求单行文本垂直居中，只需要将div2设置行高line-height和height的值相同即可，也可以不用设置高度，因为单行文本的行高会撑开高度，其实二者就是一样的值。

 

但是这种方法有个不足之处，那就是如果文字内容的长度大于块的宽度时，就有一部分内容脱离了块，因为就不再是单行文本了，所以此方法只适用于单行文本。

 

还有一个方法就是，如果不设置元素height的情况下，那么本身就是元素包裹着内容，这时候只要将padding-top与padding-bottom设置为相同的值，同样是垂直居中的效果，而且这种方法对多行文本等都通用。

 

• vertical-align：middle

​通过设置vertical-align：middle也可以实现垂直居中，但它有以下几种情况：

如下图，div2中同时又inline和inline-block元素，我们没有给div2设置高度时，它的高度由图片的高度撑开，而且图片和文本显示在一行，但我们发现图片下方有空隙，这是因为inline-block自带vertical-align属性，而且是默认值baseline。现在我们把vertical-align设置为middle，就会呈现出垂直居中的效果。（vertical-align属性只对拥有valign特性的html元素起作用，例如表格元素中的<td><th>等等，而像<div><span>这样的元素是不行的。）

 

 

但是当我们给div2设置了高度之后，vertical-align：middle就不起作用了。要加上inline-height之后才可以。

 

 

当容器里只有文字没有图片时，还可以利用 display 和 vertical-align 对容器里的文字实现垂直居中。通过将父元素的display设置为table-cell，并设置vertical-align:middle，可使其子元素均实现垂直居中，这和表格里单元格的垂直居中是类似的。

 

• 新增一个基准元素

在div2之前新增一个基准元素，设置它的高度等于父元素高度一半，之后再给要垂直居中的元素设置margin-top的值的大小是负的它自身高度，在设置line-height，则实现了垂直居中。

 

• 绝对定位实现垂直居中

​因为绝对定位元素具有伸缩性，所以如果我们将绝对定位元素的width设置为auto时，同时把left与right设置为0，那么元素就会将其相对的父元素水平填充满。这时如果我们把高度设置为固定值，margin为auto的前提下，只要 top和 bottom 的值相等（或都为0），且不超过其相对元素减去该绝对定位元素height 的一半，就可以实现垂直居中了。