在網(wǎng)頁設(shè)計中,我們經(jīng)常需要讓元素居中。CSS3為我們提供了多種方法來實現(xiàn)元素的居中,下面逐一介紹。
/* 水平居中 */ div { width: 200px; margin: 0 auto; } /* 垂直居中 */ div { height: 200px; display: flex; justify-content: center; align-items: center; } /* 水平垂直同時居中 */ div { width: 200px; height: 200px; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; } /* 行內(nèi)元素水平居中 */ p { text-align: center; } /* 行內(nèi)塊元素水平居中 */ span { display: inline-block; text-align: center; }
以上是幾種常用的居中方法,可以根據(jù)實際需求選擇使用。需要注意的是,flex布局需要瀏覽器支持,而絕對定位需要父元素有定位屬性。