理解水平居中的幾種表現

CSS居中算是一個比較基礎的問題，在實際運用中，需要考慮到的一般是兩種情況，一種是主要是表現為文字，圖片等行內元素的居中，一種是指 div 等塊級標籤元素的居中。

1.水平居中

 

text-align

【場景一】：在父元素中設定text-align:center實現行內元素水平居中

　　將子元素的display設定為inline-block，使子元素變成行內元素

　　[注意]若要相容IE7-瀏覽器，可使用display:inline;zoom:1;來達到inline-block的效果

html程式碼：

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

css程式碼：

.parent{text-align: center;}    
.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程式碼：

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

css程式碼：

.child{
    display: table;
    margin: 0 auto;
}

　　該方案的優點在於，只設定父級元素即可實現居中效果

 

【場景三】：若子元素定寬，則可以使用絕對定位的盒模型屬性，實現居中效果；若不設定寬度時，子元素被拉伸

html程式碼：

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

css程式碼：

.parent{
    position: relative;
}
.child{
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 50px;
}

 

absolute

【思路四】: 通過絕對定位的偏移屬性實現水平居中

　　配合translate()位移函式

　　translate函式的百分比是相對於自身寬度的，所以left:50%配合translateX(-50%)可實現居中效果

　　[注意]IE9-瀏覽器不支援

html程式碼：

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

css程式碼：

.parent{
    position: relative;
}
.child{
    position: absolute;
    left: 50%;
    transform:translateX(-50%);
}

 

【思路五】relative數值型的偏移屬性是相對於自身的，但百分比卻是相對於包含塊的。因為子元素已經被設定為absolute，所以若使用relative，則需要增加一層<div>結構，使其寬度與子元素寬度相同

　　[注意]該方法全相容，但是增加了html結構

html程式碼：

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

css程式碼：

.parent{
    position: relative;
}
.childWrap{
    position: absolute;
    left: 50%;
}
.child{
    position: relative;
    left: -50%;
}

 

【思路六】配合負margin

　　margin的百分比是相對於包含塊的，所以需要增加一層<div>結構。由於寬度width的預設值是auto，當設定負margin時，width也會隨著變大。所以此時需要定寬處理

　　[注意]雖然全相容，但需要增加頁面結構及定寬處理，所以限制了應用場景

html程式碼：

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

css程式碼：

.parent{
    position: relative;
}
.childWrap{
    position: absolute;
    left: 50%;
}
.child{
    width:50px;
    margin-left:-50%;
}

 

flex

【思路七】: 使用彈性盒模型flex實現水平居中

　　[注意]IE9-瀏覽器不支援

　　在伸縮容器上設定主軸對齊方式justify-content:center

html程式碼：

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

css程式碼：

.parent{
    display: flex;
    justify-content: center;
}

 

【思路八】在伸縮專案上設定margin: 0 auto

html程式碼：

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

css程式碼：

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

 

grid

【思路九】: 使用柵格佈局grid實現水平居中

　　[注意]IE10-瀏覽器不支援

　　在網格容器上設定justify-items或justify-content

html程式碼：

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

css程式碼：

.parent{
    display:grid;
    justify-items:center;
    /*justify-content:center;*/
} 

 

【思路十】在網格專案中設定justify-self或者margin: 0 auto

html程式碼：

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

css程式碼：

.parent{
    display:grid;
} 
.child{
    justify-self:center;
    /*margin: 0 auto;*/
}