利用CSS實現水平居中的4種思路簡要概述-css教學-PHP中文網

首頁

web前端

css教學

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

高洛峰

Mar 13, 2017 pm 05:38 PM

水平居中是經常遇到的問題。看似方法較多，條條大路通羅馬。但係統梳理下，其實都圍繞著幾個思路展開。本文將介紹關於水平居中的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的結構換成

DEMO

<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，則需要增加一層
　　[注意]此方法全相容，但是增加了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的百分比是相對於包含區塊的，所以需要增加一層

結構。由於寬度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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn