利用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的結構換成818fbd9ed5d2bf0044e6cee6956524cdDEMO461d64cd76f5acc4cda68170a46ed26c結構。由於寬度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>

以上是利用CSS實現水平居中的4種思路簡要概述的詳細內容。更多資訊請關注PHP中文網其他相關文章！