CSS垂直居中的6种方法_文字垂直居中

垂直居中一直是CSS布局中比较令人头疼的问题，相比于水平居中，垂直居中对于不同的元素类型需要采取截然不同的策略，因此常常会因为策略的误用导致无法成功居中。这篇文章总结了垂直居中的6种常见策略。

1.Vertical-Align

切记 vertical-align 只对 table-cell 以及 inline-element 起作用，vertical-align 的值是相对于其父元素的，父元素必须是行内元素。

对于一行文字来讲，该属性的值是相对于行高（line-height）的。
对于 table-cell，该属性的值是相对于表格的行高的。
1
2

vertical-align 对于块级元素不起作用，例如我们无法用它去垂直居中一个div中的p元素，因此这个方法通常不是垂直居中的最优选择。

2.Line-Height 方法

这个方法适用于单行文字的垂直居中，只需要将包含文字元素的容器行高设置为大于字体大小并且等于元素的高度。默认情况下，文字上下部分会留有相同的空间，因而实现了文字的垂直居中。

<div id="parent">
    <div id="child">Text here</div>
</div>
1
2
3

#child {
    line-height: 200px;
}
1
2
3

这种方法只适用于单行文字的垂直居中，如果需要多行文字居中，需要选择其他方法。

3.使用 Line-Height 垂直居中图片

使 line-height 可以实现图片的垂直居中，只需要在包含图片的父元素上设置 line-height 然后为图片设置 vertical-align: middle。

<div id="parent">
    <img src="image.png" alt="" />
</div>
1
2
3

4.CSS表格法

之前已经提到 vertical-align 适用于 table-cell, 因此可以通过将元素转化为table来实现垂直居中。

<div id="parent">
    <div id="child">Text here</div>
</div>
1
2
3

#parent {
    display: table;
}

#child {
    display: table-cell;
    vertical-align: middle;
}
1
2
3
4
5
6
7
8

注意这种方法的好处在于支持内容的动态改变，缺点是不支持旧版的IE浏览器（<=IE7）。

5.绝对定位和负边距法

这种方法适用于块级元素，需要设置元素的高度。下面的代码同时实现了子元素的水平和垂直居中：

<div id="parent">
    <div id="child">Content here</div>
</div>
1
2
3

#parent {
    position: relative
}

#child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}
1
2
3
4
5
6
7
8
9
10
11
12

这种方法利用绝对定位先将元素的上边界和左边界移动到50%的位置，再根据元素的尺寸调整负边距以达到居中的效果。

这种方法适用于所有浏览器，但是由于需要预先设定元素高度，因此可能出现内容超出容器的情况。

6.上下内边距（padding）相等法

这种方法通过设置上下padding相等来实现垂直居中。

<div id="parent">
    <div id="child">Content here</div>
</div>
1
2
3

#parent {
    padding: 5% 0;
}

#child {
    padding: 10% 0;
}
1
2
3
4
5
6
7

上面的代码使用了相对尺寸，然而如果需要指定元素尺寸时，就需要使用绝对尺寸并做一个简单的计算了。例如，如果指定父元素高度为400px，子元素高度为100px，要实现垂直居中需要设置父元素的上下padding为150px。