常用的CSS實現垂直置中的4種方法

來源:互聯網
上載者:User
這次給大家帶來常用的CSS實現垂直置中的4種方法,CSS實現垂直置中的注意事項有哪些,下面就是實戰案例,一起來看一下。

行高line-height實現單行文本垂直置中

以前一直認為單行文本垂直置中要將高度和行高設定成相同的值,但高度其實沒必要設定。實際上,文本本身就在一行中置中顯示。在不設定高度的情況下,行高撐開高度。

<style>.test{    line-height: 50px;    background-color: lightblue;}    </style><p class="test">測試文字</p>

設定vertical-align:middle實現垂直置中

【1】設定父元素的display為table-cell

通過為table-cell元素設定vertical-align:middle,可使其子項目均實現垂直置中。這和表格裡儲存格的垂直置中是類似的

[注意] 若要IE7-瀏覽器支援,則可以將其改為<table>表格結構

[注意] 設定為table-cell的p不能使用浮動或絕對位置,因為浮動或絕對位置會使元素具有區塊層級元素特性,從而喪失了table-cell元素具有的垂直對齊的功能。

若需要浮動或絕對位置處理,則需要外面再套一層p。

<style>.parent{  display: table-cell;  vertical-align: middle;}</style><p class="parent" style="background-color: gray;height: 100px;">    <p class="child" style="background-color: lightblue;">我是有點長的有點長的有點長的有點長的測試文字</p>   </p>

【2】若子項目是圖片,通過設定父元素的行高來代替高度,且設定父元素的font-size為0。

vertical-align:middle的解釋是元素的中垂點與父元素的基準加1/2 父元素中字母X的高度對齊。由於字元X在em框中並不是垂直置中的,且各個字型的字元X的高低位置不一致。

所以,當字型大小較大時,這種差異就更明顯。當 font-size為0時,相當於把字元X的字型大小設定為0,於是可以實現完全的垂直置中。

<style>.parent{  line-height: 100px;  font-size: 0;}.child{  vertical-align: middle;}</style><p class="parent" style="background-color: lightgray;width:200px;">  <img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">  </p>

【3】通過新增元素來實現垂直置中的效果

新增元素設定高度為父級高度,寬度為0,且同樣設定垂直置中vertical- align:middle的inline-block元素。由於兩個元素之間空白被解析,所以需要在父級設定font-size:0,在子級再將 font-size設定為所需值;若結構要求不嚴格,則可以將兩個元素一行顯示,則不需要設定font-size:0。

<style>.parent{  height: 100px;  font-size: 0;}.child{  display: inline-block;  font-size: 20px;  vertical-align: middle;}.childSbling{  display: inline-block;  height: 100%;  vertical-align: middle;}</style><p class="parent" style="background-color: lightgray; width:200px;">  <p class="child" style="background-color: lightblue;">我是比較長的比較長的多行文字</p>  <i class="childSbling"></i> </p>

思路三:通過絕對位置實現垂直置中

【1】若子項目不定高, 使用top50%配合translateY(-50%)可實現置中效果。

translate函數的百分比是相對於自身高度的,所以top:50%配合translateY(-50%)可實現置中效果。

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

[注意]若子項目的高度已知,translate()函數也可替換為margin-top: 負的高度值。

<style>.parent{  position:relative;}.child{  position: absolute;  top: 50%;  transform: translateY(-50%);}</style><p class="parent" style="background-color: lightgray; height:100px;">  <p class="child" style="background-color: lightblue;">測試文字</p></p>

【2】若子項目定高,結合絕對位置的盒模型屬性,實現置中效果

<style>.parent{  position: relative;}.child{ position: absolute; top: 0; bottom: 0; margin: auto 0; height: 50px;}</style><p class="parent" style="background-color: lightgray; height:100px;">  <p class="child" style="background-color: lightblue;">測試文字</p></p>

<關於增加p層級的說明>

在水平置中對齊中,元素外層套一層p並設定absolute,元素設定負margin-left或者relative的負left屬性,可以實現水平置中的效果。但由於margin是相對於包含塊寬度的,這樣margin-top:-50%得到的是寬度而不是高度的-50%,所以不可行;對於relative的百分比取值而言,在包含塊高度為auto的情況下,chrome、safari和IE8+瀏覽器都不支援設定元素的百分比top值,所以也不可行。

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

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

【1】在伸縮容器上設定側軸對齊align-items: center

<style>.parent{  display: flex;  align-items: center;}</style><p class="parent" style="background-color: gray; height: 100px;">    <p class="child" style="background-color: lightblue;">測試文字</p>   </p>

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

<style>.parent{  display: flex;}.child{  margin: auto 0;}</style><p class="parent" style="background-color: gray; height: 100px;">    <p class="child" style="background-color: lightblue;">測試文字</p>   </p>

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

css3的pointer-events使用詳解

focus-within的使用詳解

CSS3做出無縫輪播廣告

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.