前言
前端開發(fā)中元素居中是最常見和最經(jīng)常使用到的css技巧，不僅開發(fā)中經(jīng)常會用到躲雅，面試官出題考核基礎(chǔ)時有時候也會問道這類問題劫乱。本文主要介紹10種垂直居中的方法巡李。希望對你我都有幫組澄者。
1笆呆、line-height+height實現(xiàn)
如果子元素是行內(nèi)文本元素的話，只要設(shè)置父元素的height和line-height高度一樣就可以垂直居中粱挡。
HTML
<div class="parent">
<span class="child">我是行內(nèi)元素</span>
</div>
CSS
.parent {
height: 200px;
width: 200px;
line-height: 200px;
background: #fcc;
}
.child {
background: #f66;
}
效果圖：
2赠幕、flex+align-items實現(xiàn)
flex布局可以實現(xiàn)一行或多行元素垂直居中，使用align-items：center就可以询筏。
HTML
<div class="parent">
<div class="child">flex實現(xiàn)居中</div>
</div>
CSS
.parent {
height: 200px;
width: 200px;
display: flex;
align-items: center;
background: #fcc;
}
.child {
background: #f66;
width: 180px;
}
效果圖：
3榕堰、table-cell+vertical-align實現(xiàn)
利用表布局的vertical-align: middle屬性可以實現(xiàn)子元素的垂直居中。
HTML
<div class="parent">
<div class="child">使用表格垂直居中</div>
</div>
CSS
.parent {
height: 200px;
width: 200px;
display: table;
}
.child {
background: #f66;
vertical-align: middle;
display: table-cell;
}
效果圖：
4嫌套、absolute+負(fù)margin(已知高度寬度)
通過絕對定位元素距離頂部50%逆屡，并設(shè)置margin-top向上偏移元素高度的一半圾旨，就可以實現(xiàn)居中。
HTML
<div class="parent">
<div class="child">absolute+負(fù)margin</div>
</div>
CSS
.parent {
height: 200px;
width: 200px;
position: relative;
background: #fcc;
}
.child {
background: #f66;
height: 50px;
position: absolute;
top: 50%;
margin-top: -25px;
width: 180px;
}
效果圖：
5康二、absolute+transform(已知高度寬度)
當(dāng)垂直居中的元素的高度和寬度未知時，可以借助CSS3中的transform屬性向Y軸反向偏移50%的方法實現(xiàn)垂直居中勇蝙。但存在兼容性問題沫勿。
HTML
<div class="parent">
<div class="child">absolute+transform</div>
</div>
CSS
.parent {
height: 200px;
width: 200px;
position: relative;
background: #fcc;
}
.child {
background: #f66;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 180px;
}
效果圖：
6、absolute + calc實現(xiàn)
這種方式也要求居中元素的寬高必須固定味混，使用css3的ca'lc計算屬性产雹，top的百分比是基于元素的左上角，那么用top百分比在減去寬度的一半就可以垂直居中翁锡。
HTML
<div class="parent">
<div class="child">absolute + calc</div>
</div>
CSS
.parent {
height: 200px;
width: 200px;
position: relative;
background: #fcc;
}
.child {
background: #f66;
height: 50px;
width: 180px;
position: absolute;
top: calc(50% - 25px);
width: 180px;
}
效果圖：
7蔓挖、absolute+margin: auto實現(xiàn)
通過絕對定位，然后設(shè)置top：0馆衔、bottom：0瘟判、margin：auto實現(xiàn)居中。
HTML
<div class="parent">
<div class="child">absolute + margin: auto</div>
</div>
CSS
.parent {
height: 200px;
width: 200px;
position: relative;
background: #fcc;
}
.child {
background: #f66;
height: 50px;
width: 180px;
position: absolute;
top: 0;
margin: auto;
bottom: 0;
}
效果圖：
8角溃、padding實現(xiàn)
通過設(shè)置父元素padding來實現(xiàn)拷获。
HTML
<div class="parent">
<div class="child">padding實現(xiàn)</div>
</div>
CSS
.parent {
width: 200px;
padding: 80px 0;
background: #fcc;
}
.child {
background: #f66;
height: 80px;
width: 180px;
line-height: 80px;
}
效果圖：
9、flex+flex-direction實現(xiàn)
這種方式也是首先給父元素設(shè)置 display:flex 减细，然后改變主軸的方向 flex-direction: column匆瓜，最后通過justify-content：center實現(xiàn)垂直居中。
HTML
<div class="parent">
<div class="child">flex+flex-direction實現(xiàn)</div>
</div>
CSS
.parent {
width: 200px;
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
background: #fcc;
}
.child {
background: #f66;
height: 80px;
width: 180px;
line-height: 80px;
}
效果圖：
10未蝌、Grid實現(xiàn)
HTML
<div class="parent">
<div class="child1"></div>
<div class="child">Grid實現(xiàn)</div>
<div class="child1"></div>
</div>
CSS
.parent {
width: 200px;
height: 200px;
display: grid;
background: #fcc;
}
.child {
background: #f66;
}
.child1 {
background: #fcc;
}
效果圖：
最后
如果喜歡的話驮吱，歡迎收藏關(guān)注。
更多優(yōu)質(zhì)文章可以訪問GitHub博客萧吠，歡迎帥哥美女前來StarＷ蠖！纸型！
