CSS3是當(dāng)前最新的CSS標(biāo)準(zhǔn)之一,它新增了許多實用的布局屬性,其中之一就是文檔主體居中。如何使用CSS3實現(xiàn)body居中呢?下面就來介紹一下:
body { display: flex; justify-content: center; align-items: center; }
首先,我們需要將body標(biāo)簽的顯示屬性設(shè)置為flex,這樣body內(nèi)的元素就可以進(jìn)行彈性盒子布局。接下來,使用justify-content屬性來設(shè)置主軸上的對齊方式,這里我們選擇居中對齊。然后,通過align-items屬性來設(shè)置側(cè)軸上的對齊方式,同樣選擇居中對齊。這樣就可以實現(xiàn)body的居中布局了。
需要注意的是,此方法只適用于有確定高度的元素。如果body標(biāo)簽沒有設(shè)置高度,也可以使用以下代碼:
html, body { height: 100%; display: flex; justify-content: center; align-items: center; }
這里將html和body標(biāo)簽的高度都設(shè)置為100%,以確保body元素占滿整個頁面。然后再按照之前的方法設(shè)置居中樣式即可。
總之,借助CSS3中新增的彈性盒子布局屬性,實現(xiàn)body居中布局非常簡單。無論是對于響應(yīng)式布局還是固定尺寸布局,這種方法都是十分實用的。