CSS-文本垂直居中

文本水平居中可以将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，如需转载请自行联系原作者