垂直居中
-
方法一：使用padding
設(shè)置塊級(jí)元素的padding-top和padding-bottom相等臣镣，注意是塊級(jí)元素舌稀，行內(nèi)元素設(shè)置padding-top和padding-bottom無(wú)效
<style>
.box{
border: 1px solid;
}
.middle{
padding: 40px 0;
}
</style>
<div class="box">
<p class="middle">我要居中</p>
</div>
-
方法二：absolute定位
使用position: absolute實(shí)現(xiàn)密任，需要分成兩種情況進(jìn)行處理：- 固定寬高
top: 50%; margin-top: -(height/2); （margin-top上移自身寬度的一半）
- 固定寬高
<style>
.box{
border: 1px solid;
height: 200px;
position: relative;
}
.box-middle{
border: 1px solid blue;
height: 50px;
width: 50%;
background-color: red;
position: absolute;
top: 50%;
margin-top: -25px;
}
</style>
<div class="box">
<div class="box-middle">
</div>
</div>
- 不知道寬高
使用css的transform: translate(-50%, -50%)；前一個(gè)-50%是針對(duì)于水平方向，后一個(gè)是-50%是針對(duì)垂直方向
<style>
.box{
border: 1px solid;
height: 200px;
position: relative;
}
.box-middle{
border: 1px solid blue;
background-color: red;
position: absolute;
top: 50%;
transform: translate(0 ,-50%);
}
</style>
<div class="box">
<div class="box-middle">我要居中顯示
</div>
</div>
注意：使用該屬性需要考慮兼容性
-
方法三: vertical-align: middle
注意： vertical-align只能作用在行內(nèi)元素和display: table;的元素中液南；
vertical-align:middle居中原理：將行內(nèi)元素框中點(diǎn)與父元素基線上方0.5ex處的一個(gè)點(diǎn)對(duì)齊，這里的1ex是相對(duì)于父元素的font-size定義的勾徽，大多數(shù)用戶代理都把1ex處理為0.5em滑凉，middle往往是將元素的垂直中點(diǎn)與父元素基線上方的0.25em處的一個(gè)點(diǎn)對(duì)齊。
代碼如下：
<style>
.box{
height: 100px;
border: 1px solid;
}
.box:after{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
span{
vertical-align: middle;
}
</style>
<div class="box">
<span>hhhahah </span>
</div>
最關(guān)鍵的一點(diǎn)是：給父元素添加偽類喘帚，height:100%畅姊；
-
方法四：display: table; vertical-align: middle
可以通過(guò)給父元素設(shè)置display:table，垂直居中元素設(shè)置display:table-cell; vertical-align: middle;
也可以是給父元素設(shè)置display: table-cell; vertical-align: middle;
<style>
.box{
height: 100px;
border: 1px solid;
display:table;
}
span{
display: table-cell;
vertical-align: middle;
}
或者
.box{
height: 100px;
border: 1px solid;
display:table-cell;
vertical-align: middle;
}
</style>
<div class="box">
<span>hhhahah </span>
</div>
