网页上的文字和图片垂直居中，也是个技术活

发表于 | 分类于 |

注意！以下方法并不能兼容IE，万恶的IE，想别的办法吧。要么专门写针对IE的CSS，要么就直接放弃IE。

单行文本垂直居中

单行文本的垂直居中很简单，只要设置了height和line-height就可以了，如下所示：

1
2
3
4
div{
    height: 40px;
    line-height: 40px;
}

多行文本垂直居中

如果文字不确定是几行，可能是一行，也可能是多行。
这个时候肯定不能按照单行文本那样设置了。
比如有如下文字：

1
2
3
4
5
<div>
    <p>这是第一行文字</p>
    <p>这是第二行文字，下面还有</p>
    <p>下面不一定有文字，也不一定没有文字</p>
</div>

需要以下CSS代码：

1
2
3
4
5
6
div{
    height: 300px;
    vertical-align: middle;
    display: table-cell;
    font-size: 18px;
}

主要是需要设置display: table-cell;和vertical-align: middle;，即可实现多行文本在高度为300px的div内垂直居中。

图片垂直居中

图片垂直居中的办法和多行文字也是不一样的，我亲自测试过，不行。
我不知道是不是兼容性的问题，反正最终我没有设置成功。
最终在网上找到这么一段代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
div{
    height: 95px;
    text-align: center;
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    display: -moz-box;
    -moz-box-align: center;
    -moz-box-pack: center;
    display: -o-box;
    -o-box-align: center;
    -o-box-pack: center;
    display: -ms-box;
    -ms-box-align: center;
    -ms-box-pack: center;
    display: box;
    box-align: center;
    box-pack: center;
}

这样div包含的img图片，就可以垂直居中了。