跬步-CSS實現水平垂直居中
阿新 • • 發佈：2019-01-11
CSS實現居中，無論在實際開發和麵試都是常見的內容。
本文總結了實現居中常見的幾種方式，包含寬度已知/未知及相容性的要求。
<style>
.pn {
width: 500px;
height: 500px;
border: 1px solid #000;
}
.box {
background-color: #eee;
}
.size {
width: 100px;
height: 100px;
}
</style>
<body>
<div class="pn">
<div class="box size">啦啦啦</div>
</div>
</body>
這一段是公共內容，pn類是父容器，box類代表需要居中的元素，size類控制是否定義高度。
line-height
利用行內元素高度和行高相同的居中效果，此方法常用於單行文字的垂直居中效果。
.pn { line-height: 500px; text-align: center; font-size: 0; } .box { font-size: 14px; display: inline-block; line-height: initial; text-align: left; }
absolute margin負值
父元素設定為定位元素，子元素的絕對定位是基於父元素的寬高，這個效果可以達到居中的目的。
由於定位的基點是基於子元素的左上角，需要根據元素自身的尺寸做對應的偏移糾正。
此方法是最常用的居中方式，相容效果好，需要已知子元素的高度。
.pn { position: relative; } .box { position: absolute; top: 50%; left:50%; margin-top: -50px; margin-left: -50px; }
absolute auto
該方法同樣是基於定位實現，先將子元素的定位都設定為0，再將margin設定為auto就可以實現居中。
相容效果好，需要已知子元素的高度。
.pn {
position: relative;
}
.box {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
absolute calc
該方法同樣是基於定位實現，利用calc特性直接計算定位的偏移位置。
需要相容css3的calc特性，已知子元素的高度。
.pn {
position: relative;
}
.box {
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
absolute transform
該方法同樣是基於定位實現，利用transform偏移自身的位置實現居中。
需要相容css3的transform特性，不需要已知高度。
.pn {
position: relative;
}
.box {
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%)
}
table
利用table元素天然垂直居中的特性實現居中效果。
使用table做佈局背離了語義化的初衷，也會產生很多冗餘的程式碼，不建議使用。
.pn{ text-align: center; } .box{ display: inline-block; } <table> <tbody> <tr> <td class="pn"> <div class="box">啦啦啦</div> </td> </tr> </tbody> </table>
css-table
利用css的table屬性，可以讓普通元素擁有table元素的特性和效果。
原理和table一樣，相容效果好，不需要已知高度。
.pn { display: table-cell; text-align: center; vertical-align: middle; } .box { display: inline-block; }
flex
flex是css3中最新佈局方式，可以很方便實現各種佈局效果。
利用flex的justify-content和align-items特性實現居中效果。
該方法實現簡單，但是需要相容flex特性。
.pn { display: flex; justify-content: center; align-items: center; }
grid
grid是最新的佈局方式，利用justify-self和align-self可以快速實現居中效果。
grid現在的相容性不太好，使用時要注意。
.pn{ display: grid; } .box{ justify-self: center; align-self: center; }