对文本垂直居中的一些方法记录

对文本垂直居中的一些方法记录

我们在写网页时不可避免的需要对文本进行排版，很多时候需要对文本进行居中处理，水平居中很好解决，几乎一条align:center就能解决多数情况，而垂直方向是我们此文的重点内容。
我们将从单行到多行，从外围块高度确定到不确定来分析，当然暂时不考虑图文混排的情况。

首先，单行固定高度：
我们只需要设置它的实际高度height和所在行的高度line-height相等即可。
例如：

Document

*{
padding:0;
margin:0;
}
.dhgd{
border:solid 1px #c00;
height:80px;
line-height: 80px;
}

我是一段单行文本

效果如下：



当然为了保险起见，比如说文本太长，一个块宽度不够时，防止文本换行，我们可以使用overflow:hidden使其多出来的文本被隐藏，只是这也是一个缺点。

多行固定高度：

由于高度已定，我们还可以按照上面的方法，使各行的line-height值为块高除以行数：

Document

*{
padding:0;
margin:0;
}
.dhgd{
border:solid 1px #c00;
height:120px;
line-height: 30px;
}

我是第一段单行文本

我是第二段单行文本

我是第三段单行文本

我是第四段单行文本

效果如下：



CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一个display属性能够模拟<table>，所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。
注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个<div>元素：

Document

*{
padding:0;
margin:0;
}
.wrap{
height:120px;
display:table;
border:solid 1px #0c0;
}
.dhgd{
vertical-align:middle;
display:table-cell;
border:solid 1px #c00;
height:120px;
}

我是第一段单行文本

我是第二段单行文本

我是第三段单行文本

我是第四段单行文本

效果如下：



可以发现文本是整体的（相当于多行的文本作为一个整体了）垂直的居中，感觉没有上面的方法使得文本之间距离也相等的功能。自己看需要来使用吧。

多行未知高度文本的垂直居中：

实际上是高度为自动的情况（因为高度未知也可能是设置了高度但自己不知道），这时我们可以使用上下的 padding值相同来实现：

Document

*{
padding:0;
margin:0;
}
.dhgd{
border: solid 1px #c00;
padding: 20px;
}

我是第一段单行文本

我是第二段单行文本

我是第三段单行文本

我是第四段单行文本

效果如下：



个人感觉这种效果与使用table-cell差不多。