純CSS完美實(shí)現(xiàn)垂直水平居中的6種方式責(zé)任編輯 :李飛    文章來(lái)源 :星翼創(chuàng)想(16qt59sf.cn)    發(fā)布時(shí)間 :2016-07-31    閱讀次數(shù):4276

由于HTML語(yǔ)言的定位問(wèn)題，在網(wǎng)頁(yè)中實(shí)現(xiàn)居中也不是如word中那么簡(jiǎn)單，尤其在內(nèi)容樣式多變，內(nèi)容寬高不定的情況下，要實(shí)現(xiàn)合理的居中也是頗考驗(yàn)工程師經(jīng)驗(yàn)的。網(wǎng)上講居中的文章很多，但是都不太完整，所以小茄今天就來(lái)總結(jié)下純CSS實(shí)現(xiàn)居中的各種方案。學(xué)疏才淺，文中如有不當(dāng)之處，萬(wàn)望指出！

6種方案

1、絕對(duì)定位+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>開(kāi)發(fā)工具 【 WeX5 】： 高性能輕架構(gòu)、開(kāi)源免費(fèi)、跨端、可視化</h3> </div> </div>

效果：

實(shí)現(xiàn)原理：利用css定位規(guī)則，設(shè)置左右、上下方向定位為0，margin為auto，讓css根據(jù)定位計(jì)算margin值，用hack的方式實(shí)現(xiàn)居中。居中塊（綠色）的尺

寸需要可控,因?yàn)閏ss計(jì)算margin時(shí)也需要參考尺寸值，由于四周為0，所以自動(dòng)計(jì)算的尺寸是與父容器一樣的。無(wú)論是設(shè)置width、height或者是 max-

height、max-width，都是讓尺寸不會(huì)擴(kuò)大到與父級(jí)一樣。

2、絕對(duì)定位+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>開(kāi)發(fā)工具 【 WeX5 】： 高性能輕架構(gòu)、開(kāi)源免費(fèi)、跨端、可視化</h3> </div>

</div>

效果：

實(shí)現(xiàn)原理：由于top、left偏移了父對(duì)象的50%高度寬度，所以需要利用margin反向偏移居中塊的50%寬高。而margin中不能使用百分比，因?yàn)榘俜直仁轻槍?duì)

父對(duì)象的，所以需要手動(dòng)計(jì)算定值指定margin值。這個(gè)方案需要固定尺寸值，以此來(lái)計(jì)算margin反向偏向值，所以方案2比方案1稍差！

3、絕對(duì)定位+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>開(kāi)發(fā)工具 【 WeX5 】： 高性能輕架構(gòu)、開(kāi)源免費(fèi)、跨端、可視化</h3>

</div>

效果：

實(shí)現(xiàn)原理：方案3與方案2原理一樣！不同點(diǎn)是使用了transform來(lái)代替margin做反向偏移，由于transform的計(jì)算基準(zhǔn)是元素本身，所以這里可以用50%來(lái)做反向偏移。這個(gè)方案也需要固定尺寸值，瀏覽器以此為基準(zhǔn)來(lái)計(jì)算定位！

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>

效果：

實(shí)現(xiàn)原理：方案4是實(shí)現(xiàn)效果比較好的，居中塊的尺寸可以做包裹性，缺點(diǎn)是增加了一層table-cell層來(lái)實(shí)現(xiàn)垂直居中。方案4的居中塊可以設(shè)置 max-

height、max-width，而且居中塊是可以具有垂直方向的包裹性的。水平方向由于是在table-cell里面的，所以會(huì)直接顯示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>開(kāi)發(fā)工具 【 WeX5 】： 高性能輕架構(gòu)、開(kāi)源免費(fèi)、跨端、可視化</h3> </div>

</div>

效果：

實(shí)現(xiàn)原理：原理：利用inline-block的vertical-align: middle去對(duì)齊after偽元素，after偽元素的高度與父對(duì)象一樣，就實(shí)現(xiàn)了高度方向的對(duì)齊。方案5實(shí)現(xiàn)效果更加好，居中塊的尺寸可以做包裹性、自適應(yīng)內(nèi)容，兼容性也相當(dāng)好。缺點(diǎn)是水平居中需要考慮inline-block間隔中的留白（代碼換行符遺留問(wèn)題。）。方案4的居中塊可以設(shè)置 max-height、max-width，而且居中塊是可以具有水平垂直兩個(gè)方向的自適應(yīng)。

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>開(kāi)發(fā)工具 【 WeX5 】： 高性能輕架構(gòu)、開(kāi)源免費(fèi)、跨端、可視化</h3> </div>

</div>

效果：

實(shí)現(xiàn)原理： flexbox布局。此乃布局終極大法，專(zhuān)治各種布局定位難題！優(yōu)點(diǎn)：能解決各種排列布局問(wèn)題，實(shí)現(xiàn)方式符合人類(lèi)認(rèn)知。缺點(diǎn)：PC端某些舊瀏覽器支持度不高。

文章轉(zhuǎn)載請(qǐng)保留網(wǎng)址：http://16qt59sf.cn/news/faq/1730.html