文本水平居中可以将text-align设置为center即可，垂直居中的话如果是单纯的设置vertical-align是没办法单独设置成功的，垂直居中的文字分为单行文本和多行文本，主要是两种不同的实现方式。
单行文本垂直居中
设置line-height和height高度一样即可:
|
1
2
3
4
5
6
7
8
9
|
.outer-line {
border: 1px solid red;
height: 200px;
line-height: 200px;
width: 200px;
}
<
div
class="outer-line">
博客园-FlyElephant
</
div
>
|
多行文本垂直居中
通过table和table-cell的方式实现垂直居中：
|
1
2
3
4
5
|
<
div
class="outer-table">
<
div
class="inner">
博客园-FlyElephant 原文地址:http://www.cnblogs.com/xiaofeixiang/
</
div
>
</
div
>
|
样式设置:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
.outer-table {
border: 1px solid red;
height: 200px;
width: 200px;
margin-top: 20px;
display: table;
}
.inner {
display: table-cell;
vertical-align: middle;
}
|
本文转自Fly_Elephant博客园博客，原文链接：http://www.cnblogs.com/xiaofeixiang/p/5005587.html，如需转载请自行联系原作者
