CSS文本和div垂直居中方法总结

在样式布局中，我们经常碰到需要将元素居中。通过css实现元素的水平居中较为简单：对文本，只需要对其父级元素设置text-align: center;，而对div等块级元素，只需要设置其left和right的margin值为auto。要实现元素的垂直居中，有人会想到css中的vertical-align属性，但是它只对拥有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。因此我们需要通过别的方法去实现元素的垂直居中，下面我总结了几种了常用垂直居中方法。

单行文本垂直居中

对于单行文本，我们只需要将文本行高(line-height)和所在区域高度(height)设为一致即可：

1. <!--html代码-->  
2.     <div id="div1">  
3.         这是单行文本垂直居中   
4.     </div>  
5.   
6. /*css代码*/   
7.         #div1{   
8.             width: 300px;   
9.             height: 100px;   
10.             margin: 50px auto;   
11.             border: 1px solid red;   
12.             line-height: 100px; /*设置line-height与父级元素的height相等*/   
13.             text-align: center; /*设置文本水平居中*/   
14.             overflow: hidden; /*防止内容超出容器或者产生自动换行*/   
15.         }   

多行文本垂直居中

多行文本垂直居中分为两种情况，一个是父级元素高度不固定，随着内容变化；另一个是父级元素高度固定。

父级元素高度不固定

父级高度不固定的时，高度只能通过内部文本来撑开。这样，我们可以通过设置内填充（padding）的值来使文本看起来垂直居中，只需设置padding-top和padding-bottom的值相等：

1. <!--html代码-->  
2.     <div id="div1">  
3.             这是多行文本垂直居中，   
4.             这是多行文本垂直居中，   
5.             这是多行文本垂直居中，   
6.             这是多行文本垂直居中。   
7.     </div>  
8.   
9. /*css代码*/   
10.         #div1{   
11.             width: 300px;   
12.             margin: 50px auto;   
13.             border: 1px solid red;   
14.             text-align: center; /*设置文本水平居中*/   
15.             padding: 50px 20px;   
16.         }   
17.   

父级元素高度固定

本文一开始就提到css中的vertical-align属性，但是它只对拥有valign特性的元素才生效，结合display: table;，可以使得div模拟table属性。因此我们可以设置父级div的display属性：display: table;；然后再添加一个div包含文本内容，设置其display:table-cell;和vertical-align:middle;。具体代码如下：

1. <!--html代码-->  
2.     <div id="outer">  
3.         <div id="middle">  
4.             这是固定高度多行文本垂直居中，   
5.             这是固定高度多行文本垂直居中，   
6.             这是固定高度多行文本垂直居中，