CSS中,讓元素水平居中是比較簡單的,主要有以下幾種方法:
/* 方法1:設置寬度和margin */ div { width: 400px; margin: 0 auto; } /* 方法2:使用 flex */ .container { display: flex; justify-content: center; } .container div { /* 設置寬度 */ }
但是讓元素垂直居中,就比較麻煩了,特別是元素高度未知或者不定高的情況下。以下是一些實現垂直居中的方法:
/* 方法1:使用絕對定位和偏移量 */ .parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* 方法2:使用 flex */ .parent { display: flex; align-items: center; justify-content: center; } /* 方法3:使用 table-cell */ .parent { display: table-cell; vertical-align: middle; } /* 方法4:使用 :before 或 :after 偽元素 */ .parent { position: relative; } .parent:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; } .child { display: inline-block; vertical-align: middle; }
需要注意的是,以上方法都是針對固定高度的元素來進行的,如果需要實現可變高度的元素垂直居中,可以使用 flex 或者 table-cell 的方式來實現。
上一篇css div鼠標點擊后
下一篇css div陰影代碼