這篇文章為大家整理四種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-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>登入後複製
以上是CSS四中方法實現垂直居中的詳細內容。更多資訊請關注PHP中文網其他相關文章！
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
-
2023-03-14 15:58:02
-
1970-01-01 08:00:00
-
2023-03-15 07:38:01
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
