首頁 >web前端 >css教學 >常用的CSS實作垂直居中的4種方法

常用的CSS實作垂直居中的4種方法

php中世界最好的语言
php中世界最好的语言原創
2018-03-21 13:20:402809瀏覽

這次帶給大家常用的CSS實現垂直居中的4種方法,CSS實現垂直居中的注意事項有哪些,下面就是實戰案例,一起來看一下。

行高line-height實作單行文字垂直居中

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

<style>
.test{
    line-height: 50px;
    background-color: lightblue;
}    
</style>
<p>测试文字</p>

#vertical-align:middle實作垂直居中

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

透過為table-cell元素設定vertical-align:middle,使其子元素皆實現垂直居中。這和表格裡單元格的垂直居中是類似的

[注意] 若要IE7-瀏覽器支持,則可以將其改為

表格結構

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

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

<style>
.parent{
  display: table-cell;
  vertical-align: middle;
}
</style>
<p>
    </p><p>我是有点长的有点长的有点长的有点长的测试文字</p>   

常用的CSS實作垂直居中的4種方法

【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>
  <img  alt="常用的CSS實作垂直居中的4種方法" >  
</p>

常用的CSS實作垂直居中的4種方法

【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>
  </p><p>我是比较长的比较长的多行文字</p>
  <i></i> 

想法三:透過絕對定位實現垂直居中

#【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>
  </p><p>测试文字</p>

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

<style>
.parent{
  position: relative;
}
.child{
 position: absolute;
 top: 0;
 bottom: 0;
 margin: auto 0;
 height: 50px;
}
</style>
<p>
  </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>
    </p><p>测试文字</p>   

【2】在伸缩项目上设置margin: auto 0

<style>
.parent{
  display: flex;
}
.child{
  margin: auto 0;
}
</style>
<p>
    </p><p>测试文字</p>   

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

css3的pointer-events使用详解

focus-within的使用详解

CSS3做出无缝轮播广告

以上是常用的CSS實作垂直居中的4種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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