網(wǎng)站前端制作之如何讓一個(gè)div保持頁面上下左右居中(網(wǎng)站前端設(shè)計(jì)與制作)

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

這里就是一個(gè)圖標(biāo)和一行文字相對于整個(gè)背景居中。
那么用什么方式實(shí)現(xiàn)比較方便呢切一張透明png圖片，和底圖大小一致的，直接放上去。這種最簡單省力，但是對后期修改文字圖標(biāo)不是很友好。將圖標(biāo)和文字單獨(dú)出來，用一個(gè)固定大小的div包裹住，運(yùn)用定位來居中，這里默認(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的相對居中，然后還要測量圖標(biāo)和文字之間的間隔，給img一個(gè)margin-bottom，來實(shí)現(xiàn)上下居中，這種方式就比較靈活了，圖標(biāo)和文字都能隨時(shí)更換，但是由于限制了寬高，所以也存在一定的局限性。直接通過設(shè)置包裹的div的定位來居中，不限寬高，如下：Div{
position: absolute;
Left:50%;
Top:50%;
transform: translate(-50%,-50%);
}
這樣就實(shí)現(xiàn)了相對居中，而且不會(huì)因?yàn)閐iv里內(nèi)容的多少而出現(xiàn)位置的偏差。算是比較完美的實(shí)現(xiàn)方式了。當(dāng)然也要注意顯示上的優(yōu)化，如果文字過多，出現(xiàn)換行的情況，最好是在兩邊留點(diǎn)邊距，看起來不那么生硬。如下：
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ū)域外增加邊距，對一些要求特殊的布局能起到很好的兼容作用，不用計(jì)算拋開padding值之后的區(qū)域?qū)捀摺?br/>當(dāng)然也還有其他方式來實(shí)現(xiàn)居中效果，這里就不一一列出了。

以上就是關(guān)于網(wǎng)站前端制作之如何讓一個(gè)div保持頁面上下左右居中(網(wǎng)站前端設(shè)計(jì)與制作)，希望對你有幫助，更多內(nèi)容關(guān)注創(chuàng)新互聯(lián)。

文章標(biāo)題：網(wǎng)站前端制作之如何讓一個(gè)div保持頁面上下左右居中(網(wǎng)站前端設(shè)計(jì)與制作)
鏈接URL：http://www.jbt999.com/news5/310905.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、小程序開發(fā)、網(wǎng)站收錄、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)