CSS中垂直置中大總結以及實現原理分析

CSS中需要設定垂直置中的情況有很多，比如：文本在塊元素中的置中，行內非替換元素在塊元素中的置中，塊元素在塊元素中的置中等，其中每一種大情況又分為多個小情境，下面分情況總結並分析原理

一、文本在塊元素中的垂直置中

1.1　單行文本在塊元素中的垂直置中

1.1.1　塊元素的height確定

<div>   <span>single line</span></div>

div{  width:200px;  border:1px solid red;  height:100px;  line-height:100px;}

實現原理：文本在行內框中預設處於置中位置，也就是說如果font-size=14px, line-height=20px,那麼行間距就等於line-height-font-size=6px, 然後瀏覽器會把這6px均分成兩個3px分別加在常值內容區的上部和下部。因此常值內容區預設情況下在行內框中是垂直置中的，因此如果要使得這個文本在塊元素中垂直置中，就讓元素的line-height等於塊元素的height即可，通俗理解就是讓元素的行內框與塊元素的邊框重疊，又因line-height屬性是可繼承的，因此在塊元素中設定height:100px, line-height:100px即可實現塊中文本的垂直置中。

1.1.2　塊元素的height不確定

div{  width:200px;  border:1px solid red; /*  height:100px; */  line-height:100px;  margin:0 auto;}

原理：這種情況更好分析，給塊元素設定一個適用於頁面配置的line-heght值即可，只要存在line-height值，文本元素就在其中垂直置中，因為塊元素在沒有設定具體高度時，其高度值由行框的高度決定，此時預設塊元素的height=line-height。

1.2　多行文本在塊元素中的垂直置中

    <div>      <span>line1<br>line2</span>    </div>

div{  width:200px;  border:1px solid red;  height:100px;  line-height:100px;}span{display:inline-block;  font-size:10px;  line-height: 1.4em;  background-color: red;  vertical-align: middle;  border: 1px solid black;}

原理：給span元素設定一個display:inline-block屬性，就把文本line1和line2上下兩個行內框合并為一個大的行內框。如圖所示：

將line1和line2合并未一個行內框後，就可以看做是單行文本在塊元素中垂直置中的情況，之後參考情況1.1來設定div和span的屬性即可。

二、塊元素在塊元素中的垂直置中 2.1　父元素的height確定，子項目的height也確定

    <div>        <p> </p>    </div>

div{  width:200px;  border:1px solid red;  height:100px;}p{  background-color: yellow;  height:40px;  margin:30px auto;}

原理：給子項目設定屬性margin-top=margin-bottom=（父元素的height－子項目的height）/２即可。