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

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

多行文本垂直居中

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

父级元素高度不固定

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