CSS多行文字水平垂直居中的几种方式

发表于 | 分类于 |

单行文本的水平垂直居中常通过设置line-height实现, 而当我们需要使多行文字水平垂直居中时, 直接设置line-height不能够实现我们所需的效果.
下面通过四种不同思路实现多行文字的水平垂直居中. 这里主要介绍思路, 兼容性没有详细测过, 对于不同浏览器可能需要微调(我是在chrome 51下面跑的).

HTML如下:

1
2
3
4
5
6
<div id = "test">
    <p>
        MY TEST
        MY TEST
    </p>
</div>

使用inline-block, 通过设置文本对齐实现居中

基本思想是用子容器包裹文字, 并将子容器在父容器中水平垂直居中. 这里通过设置文本对齐实现子容器居中.

要让子容器包裹文字且能受文本对齐属性的控制, 需要将子容器设为inline-block. 要使得子容器水平垂直居中, 需要在父容器上设置text-align: center; 在子容器上设置vertical-align: middle并且将父容器的line-height设置为父容器的高度.

值得注意的是, line-height是会继承的, 所以子容器需要将line-height重置, 使得其内部的文本能够正常显示.

要能够看到效果, 还需要在HTML中父容器内添加文本, 这里通过::after来做.

为了使得子容器完全水平垂直居中, 同时隐藏父容器中多余的文本, 设置font-size: 0; 同时, 由于继承的关系, 子容器要重新设置font-size.(似乎设置过小的字体在webkit上可能会出现bug?)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#test {
    line-height: 100px;
    background-color: black;
    text-align: center;
    font-size: 0;
}
#test p {
    display: inline-block;
    width: 70px;
    line-height: normal;
    vertical-align: middle;
    font-size: 16px;
    color: white;
}
#test::after {
    content: "$";
}

使用block, 通过设置子容器位置实现居中

基本思想与思路1类似, 只是这里是通过设置位置属性实现块元素的水平垂直居中.

首先要让子容器为block. 这里<p>本来就是块级元素, 无需设置.

设置父容器position: relative; 子容器position: absolute. 并设置子容器left: 50%和top: 50%使得子容器左上角在父容器中央.

通过transform: translate(-50%, -50%)使得子容器中间而不是左上角定位到父容器中央. 并设置text-align: center使得子容器内部文本也居中.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#test {
    position: relative;
    height: 100px;
    background-color: black;
}
#test p {
    width: 70px;
    position: absolute;
    text-align: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

使用table布局

父容器设置display: table, 子容器设置display: table-cell, 并通过vertical-align: middle和text-align: center实现文字水平居中, 容器垂直居中.

值得注意的是, 这种方法无法设置子容器的宽度, 要让文本换行需要加<br\>或者设置padding. 

1
2
3
4
5
6
7
8
9
10
11
12
#test {
    display: table;
    width: 100%;
    height: 100px;
    background-color: black;
}
#test p {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    color: white;
}

使用flex布局

兼容性稍差, 对于IE10等浏览器要添加prefix甚至属性名称/值都有不同.

父容器设置display: flex, 并用justify-content: center实现子容器水平居中, align-items: center实现子容器垂直居中.

子容器设置text-align: center水平居中文本.

1
2
3
4
5
6
7
8
9
10
11
12
#test {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
}
#test p {
    width: 70px;
    text-align: center;
    color: white;
}