在CSS中,有時(shí)候需要將某個(gè)元素居中,而且還需要在它的父元素中居中。如何實(shí)現(xiàn)呢?
一般情況下,可以使用這段CSS樣式:
.parent { display: flex; justify-content: center; align-items: center; }
以上代碼使用了彈性布局,將父元素設(shè)置為彈性容器,子元素居中顯示。justify-content屬性用于設(shè)置子元素在主軸上的對(duì)齊方式,align-items屬性用于設(shè)置子元素在側(cè)軸上的對(duì)齊方式。
另外,如果我們只需要在主軸上居中,比如水平居中,那么可以使用margin屬性:
.child { margin: 0 auto; }
以上代碼將子元素的左右margin都設(shè)置為auto,這樣就可以實(shí)現(xiàn)在父元素的中心點(diǎn)展示了。