利用CSS實現水平置中的4種思路簡要概述

水平置中是經常遇到的問題。看似方法較多，條條大路通羅馬。但系統梳理下，其實都圍繞著幾個思路展開。本文將介紹關於水平置中的4種思路，感興趣的朋友參考下吧

前面的話

　　水平置中是經常遇到的問題。看似方法較多，條條大路通羅馬。但系統梳理下，其實都圍繞著幾個思路展開。本文將介紹關於水平置中的4種思路，感興趣的朋友參考下吧！

思路一：在父元素中設定text-align:center實現行內元素水平置中

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

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

<style>   .parent{text-align: center;}       .child{display: inline-block;}   </style>    <p class="parent" style="background-color: gray;">     <p class="child" style="background-color: lightblue;">DEMO</p>   </p>

思路二：在本身元素設定margin: 0 auto實現區塊層級元素水平置中

【1】將子項目的display為table，使子項目成為區塊層級元素，同時table還具有包裹性，寬度由內容撐開

　　[注意]若要相容IE7-瀏覽器，可把child的結構換成<table class="child">DEMO</table>

<style>   .child{       display: table;       margin: 0 auto;   }   </style>    <p class="parent" style="background-color: gray;">     <p class="child" style="background-color: lightblue;">DEMO</p>   </p>

【2】若子項目定寬，則可以使用絕對位置的盒模型屬性，實現置中效果；若不設定寬度時，子項目被展開

<style>   .parent{     position: relative;   }   .child{    position: absolute;    left: 0;    rightright: 0;    margin: 0 auto;    width: 50px;   }   </style>    <p class="parent" style="background-color: gray;height: 20px;">       <p class="child" style="background-color: lightblue;">DEMO</p>      </p>

思路三: 通過絕對位置的位移屬性實現水平置中

【1】配合translate()位移函數

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

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

<style>   .parent{     position: relative;   }   .child{     position: absolute;     left: 50%;     transform:translateX(-50%);   }   </style>    <p class="parent" style="background-color: gray;height: 20px;">     <p class="child" style="background-color: lightblue;">DEMO</p>   </p>

【2】配合relative

　　relative的位移屬性是相對於自身的，因為子項目已經被設定為absolute，所以若使用relative，則需要增加一層<p>結構，使其寬度與子項目寬度相同

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

<style>   .parent{     position: relative;   }   .childWrap{     position: absolute;     left: 50%;   }   .child{     position: relative;     left: -50%;   }   </style>    <p class="parent" style="background-color: gray;height: 20px;">     <p class="childWrap">       <p class="child" style="background-color: lightblue;">DEMO</p>      </p>      </p>

【3】配合負margin

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

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

<style>   .parent{     position: relative;   }   .childWrap{     position: absolute;     left: 50%;   }   .child{     width:50px;     margin-left:-50%;   }   </style>    <p class="parent" style="background-color: gray;height: 20px;">     <p class="childWrap">       <p class="child" style="background-color: lightblue;">DEMO</p>      </p>      </p>

思路四: 使用彈性盒模型flex實現水平置中

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

【1】在伸縮容器上設定主軸對齊jusify-content:center

<style>   .parent{     display: flex;     justify-content: center;   }   </style>    <p class="parent" style="background-color: gray;">       <p class="child" style="background-color: lightblue;">DEMO</p>      </p>

【2】在伸縮項目上設定margin: 0 auto

<style>   .parent{display: flex;}   .child{margin: 0 auto;}   </style>    <p class="parent" style="background-color: gray;">       <p class="child" style="background-color: lightblue;">DEMO</p>      </p>