在CSS中,居中元素一直是個非常重要的問題。有時,你可能需要將某個元素垂直居中、水平居中或同時垂直和水平居中。無論是哪種情況,都需要用到“margin:0 auto;”這個組合。
這種組合將元素的左和右外邊距都設(shè)置為自動,從而使元素在其包含塊中水平居中。如果你想要將元素垂直居中,就需要在上面加上垂直方向的margin。
.center { width: 300px; height: 300px; margin: 0 auto; margin-top: 100px; /*居中元素*/ background-color: #f5f5f5; }
如此一來,.center元素在包含塊中就會垂直居中,同時,它的左右外邊距會自動設(shè)置為相等的長度。
總的來說,“margin:0 auto;”是一種簡單而常用的方法,可以讓元素在其包含塊中水平居中。如果需要垂直居中,只需再加上垂直方向的margin即可。