[分享] 純CSS完美實現垂直水平居中的6種方式

前言

因爲HTML語言的定位問題，在網頁中實現居中也不是如word中那麼簡單，尤爲在內容樣式多變，內容寬高不定的狀況下，要實現合理的居中也是頗考驗工 程師經驗的。網上講居中的文章不少，可是都不太完整，因此小茄今天就來總結下純CSS實現居中的各類方案。學疏才淺，文中若有不當之處，萬望指出！

6種方案

一、絕對定位+margin：auto

<style type="text/css">
.wrp {
background-color: #b9b9b9;
width: 240px;
height: 160px;
}
.box {
color: white;
background-color: #3e8e41;
width: 200px;
height: 120px;
overflow: auto;
}
.wrp1 { position: relative; }
.box1 {
margin: auto;
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
}
</style>
<div class="wrp wrp1">
<div class="box box1">
<h3>徹底居中層1：</h3>
<h3>開發工具 【 WeX5 】： 高性能輕架構、開源免費、跨端、可視化</h3>
</div>
</div>

效果：

實現原理：利用css定位規則，設置左右、上下方向定位爲0，margin爲auto，讓css根據定位計算margin值，用hack的方式實現居中。居中塊（綠色）的尺
寸須要可控,由於css計算margin時也須要參考尺寸值，因爲四周爲0，因此自動計算的尺寸是與父容器同樣的。不管是設置width、height或者是 max-
height、max-width，都是讓尺寸不會擴大到與父級同樣。

二、絕對定位+margin反向偏移

</style>
<style type="text/css">
.wrp2 { position: relative; }
.box2 {
position: absolute;
top: 50%; left: 50%;
margin-left: -100px; /* (width + padding)/2 */
margin-top: -75px; /* (height + padding)/2 */
}
</style>
<div class="wrp wrp2">
<div class="box box2">
<h3>徹底居中方案二：</h3>
<h3>開發工具 【 WeX5 】： 高性能輕架構、開源免費、跨端、可視化</h3>
</div>
</div>

效果：

實現原理：因爲top、left偏移了父對象的50%高度寬度，因此須要利用margin反向偏移居中塊的50%寬高。而margin中不能使用百分比，由於百分比是針對
父對象的，因此須要手動計算定值指定margin值。這個方案須要固定尺寸值，以此來計算margin反向偏向值，因此方案2比方案1稍差！

三、絕對定位+transform反向偏移

<style type="text/css">
.wrp3 { position: relative; }
.box3 {
margin: auto;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
<div class="wrp wrp3">
<div class="box box3">
<h3>徹底居中方案三：</h3>
<h3>開發工具 【 WeX5 】： 高性能輕架構、開源免費、跨端、可視化</h3>
</div>

效果：

實現原理：方案3與方案2原理同樣！不一樣點是使用了transform來代替margin作反向偏移，因爲transform的計算基準是元素自己，因此這裏能夠用50%來作
反向偏移。這個方案也須要固定尺寸值，瀏覽器以此爲基準來計算定位！

四、display：tabel

<style type="text/css">
.wrp4 { display: table; }
.subwrp4 {
display: table-cell;
vertical-align: middle;
}
.box4 {
margin: auto;
overflow-wrap: break-word;
height: auto;
max-height: 80%;
max-width: 80%;
}
</style>
<div class="wrp wrp4">
<div class="subwrp4">
<div class="box box4">
<h3>徹底居中方案四：</h3>
</div>
</div>
</div>

效果：

實現原理：方案4是實現效果比較好的，居中塊的尺寸能夠作包裹性，缺點是增長了一層table-cell層來實現垂直居中。方案4的居中塊能夠設置 max-
height、max-width，並且居中塊是能夠具備垂直方向的包裹性的。水平方向因爲是在table-cell裏面的，因此會直接顯示max-width，也就是寬度趨大。

五、display: inline-block

<style type="text/css">
.wrp5 {
text-align: center;
overflow: auto;
}
.box5 {
display: inline-block;
vertical-align: middle;
width: auto;
height: auto;
max-width: 90%;
max-height: 90%;
}
.wrp5:after {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
margin-left: -0.25em;
/* To offset spacing. May vary by font */
}
</style>
<div class="wrp wrp5">
<div class="box box5">
<h3>徹底居中方案五：</h3>
<h3>開發工具 【 WeX5 】： 高性能輕架構、開源免費、跨端、可視化</h3>
</div>
</div>

效果：

實現原理：原理：利用inline-block的vertical-align: middle去對齊after僞元素，after僞元素的高度與父對象同樣，就實現了高度方向的對齊。方案5
實現效果更加好，居中塊的尺寸能夠作包裹性、自適應內容，兼容性也至關好。缺點是水平居中須要考慮inline-block間隔中的留白（代碼換行符遺留問
題。）。方案4的居中塊能夠設置 max-height、max-width，並且居中塊是能夠具備水平垂直兩個方向的自適應。

六、display: flex-box

<style type="text/css">
.wrp6 {
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}

.box6 {
width: auto;
height: auto;
max-width: 90%;
max-height: 90%;
}
</style>
<div class="wrp wrp6">
<div class="box box6">
<h3>徹底居中方案六：</h3>
<h3>開發工具 【 WeX5 】： 高性能輕架構、開源免費、跨端、可視化</h3>
</div>
</div>

效果：

實現原理： flexbox佈局。此乃佈局終極大法，專治各類佈局定位難題！優勢：能解決各類排列布局問題，實現方式符合人類認知。缺點：PC端某些舊瀏
覽器支持度不高。

純CSS實現居中的各類方案就總結到這裏了，碼字不易，順手點贊哈！