web前端頁(yè)面開(kāi)發(fā)中經(jīng)常會(huì)遇到頁(yè)面居中的彈窗功能，設(shè)計(jì)師在設(shè)計(jì)這些彈窗的時(shí)候一般都是設(shè)計(jì)成頁(yè)面居中的。如下：

DIV塊

這里就是一個(gè)圖標(biāo)和一行文字相對(duì)于整個(gè)背景居中。

那么用什么方式實(shí)現(xiàn)比較方便呢

切一張透明png圖片，和底圖大小一致的，直接放上去。這種更簡(jiǎn)單省力，但是對(duì)后期修改文字圖標(biāo)不是很友好。

將圖標(biāo)和文字單獨(dú)出來(lái)，用一個(gè)固定大小的div包裹住，運(yùn)用定位來(lái)居中，這里默認(rèn)該div大小為300 x 300; 實(shí)現(xiàn)代碼如下：

.div{

position: absolute;

Left:50%;

Top:50%;

Margin-left: -150px;

Margin-top: -150px;

Text-aline: center;

}

這里做到了div的相對(duì)居中，然后還要測(cè)量圖標(biāo)和文字之間的間隔，給img一個(gè)margin-bottom，來(lái)實(shí)現(xiàn)上下居中，這種方式就比較靈活了，圖標(biāo)和文字都能隨時(shí)更換，但是由于限制了寬高，所以也存在一定的局限性。

直接通過(guò)設(shè)置包裹的div的定位來(lái)居中，不限寬高，如下：

Div{

position: absolute;

Left:50%;

Top:50%;

transform: translate(-50%,-50%);

}

這樣就實(shí)現(xiàn)了相對(duì)居中，而且不會(huì)因?yàn)閐iv里內(nèi)容的多少而出現(xiàn)位置的偏差。算是比較完美的實(shí)現(xiàn)方式了。當(dāng)然也要注意顯示上的優(yōu)化，如果文字過(guò)多，出現(xiàn)換行的情況，更好是在兩邊留點(diǎn)邊距，看起來(lái)不那么生硬。如下：

Div{

position: absolute;

Left:50%;

Top:50%;

transform: translate(-50%,-50%);

Padding:20px;

Box-sizing:border-box;

}

這里padding:20px;是設(shè)置上下左右邊距為20像素，使內(nèi)容不貼邊。而box-sizing:border-box;這個(gè)屬性則是設(shè)置padding的值包含在div的區(qū)域內(nèi)，不是在區(qū)域外增加邊距，對(duì)一些要求特殊的布局能起到很好的兼容作用，不用計(jì)算拋開(kāi)padding值之后的區(qū)域?qū)捀摺?/p>