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的值相等：