CSS實現(xiàn)垂直居中的4種思路詳解
我要評論行高line-height實現(xiàn)單行文本垂直居中
以前一直認(rèn)為單行文本垂直居中要將高度和行高設(shè)置成相同的值，但高度其實沒必要設(shè)置。實際上，文本本身就在一行中居中顯示。在不設(shè)置高度的情況下，行高撐開高度。
<style>
.test{
line-height: 50px;
background-color: lightblue;
}
</style>
<div class="test">測試文字</div>
設(shè)置vertical-align:middle實現(xiàn)垂直居中
【1】設(shè)置父元素的display為table-cell
通過為table-cell元素設(shè)置vertical-align:middle，可使其子元素均實現(xiàn)垂直居中。這和表格里單元格的垂直居中是類似的
[注意] 若要IE7-瀏覽器支持，則可以將其改為<table>表格結(jié)構(gòu)
[注意] 設(shè)置為table-cell的div不能使用浮動或絕對定位，因為浮動或絕對定位會使元素具有塊級元素特性，從而喪失了table-cell元素具有的垂直對齊的功能。
若需要浮動或絕對定位處理，則需要外面再套一層div。
<style>
.parent{
display: table-cell;
vertical-align: middle;
}
</style>
<div class="parent" style="background-color: gray;height: 100px;">
<div class="child" style="background-color: lightblue;">我是有點長的有點長的有點長的有點長的測試文字</div>
</div>
【2】若子元素是圖片，通過設(shè)置父元素的行高來代替高度，且設(shè)置父元素的font-size為0。
vertical-align:middle的解釋是元素的中垂點與父元素的基線加1/2 父元素中字母X的高度對齊。由于字符X在em框中并不是垂直居中的，且各個字體的字符X的高低位置不一致。
所以，當(dāng)字體大小較大時，這種差異就更明顯。當(dāng) font-size為0時，相當(dāng)于把字符X的字體大小設(shè)置為0，于是可以實現(xiàn)完全的垂直居中。
<style>
.parent{
line-height: 100px;
font-size: 0;
}
.child{
vertical-align: middle;
}
</style>
<div 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">
</div>
【3】通過新增元素來實現(xiàn)垂直居中的效果
新增元素設(shè)置高度為父級高度，寬度為0，且同樣設(shè)置垂直居中vertical- align:middle的inline-block元素。由于兩個元素之間空白被解析，所以需要在父級設(shè)置font-size:0，在子級再將 font-size設(shè)置為所需值；若結(jié)構(gòu)要求不嚴(yán)格，則可以將兩個元素一行顯示，則不需要設(shè)置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>
<div class="parent" style="background-color: lightgray; width:200px;">
<div class="child" style="background-color: lightblue;">我是比較長的比較長的多行文字</div>
<i class="childSbling"></i>
</div>
思路三：通過絕對定位實現(xiàn)垂直居中
【1】若子元素不定高， 使用top50%配合translateY(-50%)可實現(xiàn)居中效果。
translate函數(shù)的百分比是相對于自身高度的，所以top:50%配合translateY(-50%)可實現(xiàn)居中效果。
[注意] IE9-瀏覽器不支持；
[注意]若子元素的高度已知，translate()函數(shù)也可替換為margin-top: 負(fù)的高度值。
<style>
.parent{
position:relative;
}
.child{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
<div class="parent" style="background-color: lightgray; height:100px;">
<div class="child" style="background-color: lightblue;">測試文字</div>
</div>
【2】若子元素定高，結(jié)合絕對定位的盒模型屬性，實現(xiàn)居中效果
<style>
.parent{
position: relative;
}
.child{
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
height: 50px;
}
</style>
<div class="parent" style="background-color: lightgray; height:100px;">
<div class="child" style="background-color: lightblue;">測試文字</div>
</div>
<關(guān)于增加div層級的說明>
在水平居中對齊中，元素外層套一層div并設(shè)置absolute，元素設(shè)置負(fù)margin-left或者relative的負(fù)left屬性，可以實現(xiàn)水平居中的效果。但由于margin是相對于包含塊寬度的，這樣margin-top:-50%得到的是寬度而不是高度的-50%，所以不可行；對于relative的百分比取值而言，在包含塊高度為auto的情況下，chrome、safari和IE8+瀏覽器都不支持設(shè)置元素的百分比top值，所以也不可行。
思路四：使用彈性盒模型flex實現(xiàn)垂直居中
[注意] IE9-瀏覽器不支持
【1】在伸縮容器上設(shè)置側(cè)軸對齊方式align-items: center
<style>
.parent{
display: flex;
align-items: center;
}
</style>
<div class="parent" style="background-color: gray; height: 100px;">
<div class="child" style="background-color: lightblue;">測試文字</div>
</div>
【2】在伸縮項目上設(shè)置margin: auto 0
<style>
.parent{
display: flex;
}
.child{
margin: auto 0;
}
</style>
<div class="parent" style="background-color: gray; height: 100px;">
<div class="child" style="background-color: lightblue;">測試文字</div>
</div>
總結(jié)
以上所述是小編給大家介紹的CSS實現(xiàn)垂直居中的4種思路詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及
時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
css實現(xiàn)元素垂直居中的常用方法(總結(jié))
本文給大家分享幾種方法介紹css實現(xiàn)元素垂直居中的常用方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-01
這篇文章主要介紹了CSS未知高度垂直居中的實現(xiàn)，詳細(xì)的介紹了幾種方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-08- 這篇文章主要給大家介紹了關(guān)于如何優(yōu)雅的實現(xiàn)垂直居中的相關(guān)資料，文中分別給大家介紹了已知寬高的元素、未知寬高的元素以及基于 Flexbox 的解決方案，都分別給出了示例代2018-09-12
- 本文給大家分享23中css垂直居中的處理方法，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-08-27
- 這篇文章主要介紹了CSS水平垂直居中解決方案(6種)的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-10
- 作為前端攻城師，在制作Web頁面時都有碰到CSS制作水平垂直居中，我想大家都有研究過或者寫過，特別的其中的垂直居中，更是讓人煩惱，下面這篇文章主要給大家匯總介紹了關(guān)于2017-09-12
css實現(xiàn)元素水平垂直居中常見的兩種方式實例詳解
這篇文章主要給大家介紹了css實現(xiàn)元素水平垂直居中的兩種方式，文中給出了完整的示例代碼供大家參考學(xué)習(xí)，對大家的學(xué)習(xí)或者工作具有一定的參考價值，有需要的朋友們下面來2017-04-23- 這篇文章主要介紹了CSS水平垂直居中的幾種方法總結(jié),垂直居中是布局中十分常見的效果之一,本文介紹了幾種方法，有興趣的可以了解一下。2016-12-19
這篇文章主要介紹了CSS實現(xiàn)垂直居中的七個方法實例代碼詳解,需要的朋友可以參考下2019-05-06
