關(guān)于元素居中

水平居中:

內(nèi)聯(lián)元素(inline,inline-block):

在父級元素上添加樣式:text-align :center;

塊級元素(block):

給自身添加樣式:margin-left/right :auto;



垂直居中:

1,可以直接在父級元素添加一樣的上下padding,如果是inline-block元素,需要注意給它自身添加vertical-align:top樣式,如果不寫見下例bug:

bug

2,如果是單行文本垂直居中,在父級元素給死寬高的情況下,設(shè)置元素的行高等于父級元素高度。

3,可以用vertical-align樣式加上父級元素的::after偽元素居中:

偽元素

4,絕對定位垂直居中,樣式給到自身:

已知元素高度
未知元素高度

若想實現(xiàn)水平垂直雙居中,加上left,translatex的值,同理

5,display:table-cell,該屬性給到父級元素 :

table-cell

6,display:flex布局:

flex
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容