CSS全局居中可以用于網(wǎng)站設(shè)計當(dāng)中,它可以使得整個網(wǎng)站布局更加美觀、合理。下面我們來教大家如何實現(xiàn)CSS全局居中。
首先需要明確一點,CSS全局居中是針對塊級元素的,而行內(nèi)元素是不能進(jìn)行全局居中的,如果需要使行內(nèi)元素居中,需要先將其轉(zhuǎn)換為塊級元素。
span{ display:inline-block; }
接下來我們來看具體的代碼實現(xiàn)。首先是用flexbox方式實現(xiàn):
body{ display:flex; justify-content:center; align-items:center; }
此處的flexbox方式使用了display:flex屬性,它可以讓容器內(nèi)的元素沿主軸方向排列,justify-content:center可以使子元素在主軸方向上居中,align-items:center可以使子元素在側(cè)軸方向上居中。
如果你想要用傳統(tǒng)的position+transform方式實現(xiàn)全局居中,可以用下面的代碼:
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
這種方式使用position:absolute屬性,設(shè)置top和left的值都為50%,然后由于元素自身寬度和高度的影響使得元素只能在左上角接觸到父級元素邊框,因此需要使用transform:translate屬性來調(diào)整元素的位置。
總之,CSS全局居中對于布局設(shè)計非常有用處,而想要實現(xiàn)全局居中,我們可以采用flexbox方式或者傳統(tǒng)的position+transform方式。以上兩種方式都值得大家掌握。