使用CSS完美實現垂直水平置中的6種方法介紹

前言

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

6種方案

1、絕對位置+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，都是讓尺寸不會擴大到與父級一樣。

2、絕對位置+margin反向位移

<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稍差！

3、絕對位置+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%來做反向位移。這個方案也需要固定尺寸值，瀏覽器以此為基準來計算定位！

4、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，也就是寬度趨大。

5、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，而且置中塊是可以具有水平垂直兩個方向的自適應。

6、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端某些舊瀏覽器支援度不高。