理解水平居中的幾種表現

CSS居中算是一個比較基礎的問題，在實際運用中，須要考慮到的通常是兩種狀況，一種是主要是表現爲文字，圖片等行內元素的居中，一種是指 div 等塊級標籤元素的居中。
1.水平居中
 
text-align
【場景一】：在父元素中設置text-align:center實現行內元素水平居中
　　將子元素的display設置爲inline-block，使子元素變成行內元素
　　[注意]若要兼容IE7-瀏覽器，可以使用display:inline;zoom:1;來達到inline-block的效果
html代碼：

1 <div class="parent" style="background-color: gray;">
2 <div class="child" style="background-color: lightblue;">DEMO</div>

css代碼：

1 .parent{text-align: center;}    
2 .child{display: inline-block;}

這種方法的不足之處在於，子元素的text-align繼承了父元素的center，文字也居中顯示，因此須要在子元素中設置text-align:left
 
margin 【場景二】：在自己元素設置margin: 0 auto實現塊級元素水平居中
　　將子元素的display爲table，使子元素成爲塊級元素，同時table還具備包裹性，寬度由內容撐開
　　[注意]若要兼容IE7-瀏覽器，可把child的結構換成<table class="child">DEMO</table>
html代碼：

1 <div class="parent" style="background-color: gray;">
2 　　<div class="child" style="background-color: lightblue;">DEMO</div>
3 </div>

css代碼：

1 .child{
2     display: table;
3     margin: 0 auto;
4 }

　　該方案的優勢在於，只設置父級元素便可實現居中效果
 
【場景三】：若子元素定寬，則能夠使用絕對定位的盒模型屬性，實現居中效果；若不設置寬度時，子元素被拉伸
html代碼：

1 <div class="parent" style="background-color: gray;height: 20px;">
2     <div class="child" style="background-color: lightblue;">DEMO</div>   
3 </div>

css代碼：

1 .parent{
 2     position: relative;
 3 }
 4 .child{
 5     position: absolute;
 6     left: 0;
 7     right: 0;
 8     margin: 0 auto;
 9     width: 50px;
10 }

 
absolute 【思路四】: 經過絕對定位的偏移屬性實現水平居中
　　配合translate()位移函數
　　translate函數的百分比是相對於自身寬度的，因此left:50%配合translateX(-50%)可實現居中效果
　　[注意]IE9-瀏覽器不支持
html代碼：

1 <div class="parent" style="background-color: gray;height: 20px;">
2     <div class="child" style="background-color: lightblue;">DEMO</div>
3 </div>

css代碼：

1 .parent{
2     position: relative;
3 }
4 .child{
5     position: absolute;
6     left: 50%;
7     transform:translateX(-50%);
8 }

 
【思路五】relative數值型的偏移屬性是相對於自身的，但百分比倒是相對於包含塊的。由於子元素已經被設置爲absolute，因此若使用relative，則須要增長一層<div>結構，使其寬度與子元素寬度相同
　　[注意]該方法全兼容，可是增長了html結構
html代碼：

1 <div class="parent" style="background-color: gray;height: 20px;">
2     <div class="childWrap">
3         <div class="child" style="background-color: lightblue;">DEMO</div> 
4     </div>   
5 </div>

css代碼：

1 .parent{
 2     position: relative;
 3 }
 4 .childWrap{
 5     position: absolute;
 6     left: 50%;
 7 }
 8 .child{
 9     position: relative;
10     left: -50%;
11 }

 
【思路六】配合負margin
　　margin的百分比是相對於包含塊的，因此須要增長一層<div>結構。因爲寬度width的默認值是auto，當設置負margin時，width也會隨着變大。因此此時須要定寬處理
　　[注意]雖然全兼容，但須要增長頁面結構及定寬處理，因此限制了應用場景
html代碼：

1 <div class="parent" style="background-color: gray;height: 20px;">
2     <div class="childWrap">
3         <div class="child" style="background-color: lightblue;">DEMO</div> 
4     </div>   
5 </div>

css代碼：

1 .parent{
 2     position: relative;
 3 }
 4 .childWrap{
 5     position: absolute;
 6     left: 50%;
 7 }
 8 .child{
 9     width:50px;
10     margin-left:-50%;
11 }

 
flex 【思路七】: 使用彈性盒模型flex實現水平居中
　　[注意]IE9-瀏覽器不支持
　　在伸縮容器上設置主軸對齊方式justify-content:center
html代碼：

1 <div class="parent" style="background-color: gray;">
2     <div class="child" style="background-color: lightblue;">DEMO</div>   
3 </div>

css代碼：

1 .parent{
2     display: flex;
3     justify-content: center;
4 }

 
【思路八】在伸縮項目上設置margin: 0 auto
html代碼：

1 <div class="parent" style="background-color: gray;">
2     <div class="child" style="background-color: lightblue;">DEMO</div>   
3 </div>

css代碼：

1 .parent{display: flex;}
2 .child{margin: 0 auto;}

 
grid 【思路九】: 使用柵格佈局grid實現水平居中
　　[注意]IE10-瀏覽器不支持
　　在網格容器上設置justify-items或justify-content
html代碼：

1 <div class="parent" style="background-color: gray;">
2     <div class="child" style="background-color: lightblue;">DEMO</div>
3 </div>

css代碼：

1 .parent{
2     display:grid;
3     justify-items:center;
4     /*justify-content:center;*/
5 }

 
【思路十】在網格項目中設置justify-self或者margin: 0 auto
html代碼：

1 <div class="parent" style="background-color: gray;">
2     <div class="child" style="background-color: lightblue;">DEMO</div>
3 </div>

css代碼：

1 .parent{
2     display:grid;
3 } 
4 .child{
5     justify-self:center;
6     /*margin: 0 auto;*/
7 }

 

 
轉載於猿2048:➞《理解水平居中的幾種表現》