基于絕對定位 absolute /不確定子元素寬高

1:子元素確定固定寬高

.parent{position:relative;}.child{position:absolute;top:50%;width:18em;height:6em;margin-top:-3em;margin-left:-9em;}

2:寬高不固定

.parent{position:relative;}.child{position:absolute;top:50%;height:50%;transform:translate(-50%,-50%);}

基于Flexbox的解決方案

.parent{display:flex;}.child{margin:auto;}

或者直接設置align-items,不需要再給子元素設置樣式

.parent{display:flex;align-items:center;}

總結

以上是生活随笔為你收集整理的垂直居中 absolute 和 flex 方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。