DIV不確定高度內部元素水平垂直居中的方法歸納

2021-10-12 02:12:41 字數 1347 閱讀 6329

看題目就知道是利用父標籤的 display: table-cell,該屬性指讓標籤元素以**單元格的形式呈現，類似於td標籤。目前ie8+以及其他現代瀏覽器都是支援此屬性的。那麼既然父標籤已經是類似**單元了，那麼就可以利用**單元的屬性vertical-align: middle; 來使得內部元素垂直居中了，然後再給子標籤 margin:0 auto; 即可，需要說明的是，這裡的父標籤需要設定寬度，不能自適應寬度：

.styl1


.styl1 .box
html**只要用我們上面的樣式即可，之後的class名只要修改 styl1 為對應的樣式名即可。

"styl styl1">


"box">
父標籤設定 position:relative,子標籤設定 position:absolute,同時設定 left:50%,top:50%,這個時候子標籤的左上角已經垂直水平居中，再設定margin的負值為子元素寬高的50%即可將中心點對齊。

此方法缺點，需要動態調整 margin 偏移量為子標籤寬高度的一半這個值，無法自動匹配。

.styl2 .box
首先 transform 是css3的新屬性，該屬性是讓我們對元素進行旋轉、縮放、移動或傾斜。那麼再看屬性值 translate 是定義2d轉換，就是平面的x,y嘍。知道這些，那麼我們在 方法二的基礎上將偏移量通過 transform 來設定即可。

此屬性支援ie9以上屬性，而且需要相容不同瀏覽器寫法。

.styl3 .box
此方法依然是在方法二的基礎上修改，將子元素的left、top、right、bottom都設定為0，然後再 margin:auto,即可實現子元素的水平垂直居中。此方法好處是自適應父標籤的寬高，也就是說，無論父標籤寬高怎麼變都水平垂直居中哦。此方法支援ie8+以及其他瀏覽器。是不是很神奇，具體原因檢視 margin:auto實現絕對定位元素的水平垂直居中：

.styl4 .box
flex意為彈性布局，不同於盒模型布局，子元素實現垂直居中就比較容易了，具體教程可以參看 阮一峰的flex布局教程，這裡只說怎麼實現。在此我們只要將父標籤設定為 display: flex,並進行相應的主軸 justify-content: center 和交叉軸上的 align-items: center 對齊方式就可以了。

.styl5
html結構同上:

"styl styl5">


"box">

子元素div高度不確定時父div高度如何自適應

點評 每當進行頁面布局時，我們都有這樣的需求，就是當子元素div高度不確定時父div自適應高度，本文整理的多種方法可以解決此問題，感興趣的朋友可以參考下 在最外層div加以下樣式 height 100 overflow hidden 其它方法 div即父容器不根據內容自適應高度，我們看下面的 複製 ...

寬度高度不固定的div，如何水平居中以及垂直居中

水平居中 html部分12 3css部分 container center center 針對ie6 hack center a 要點 父容器container加css屬性 text align center 子容器center加css屬性display inline block center 為針...

寬度高度不固定的div 如何水平居中以及垂直居中

寬度高度不固定div的水平居中演示如下 水平居中 html部分 123css部分 container center center 針對ie6 hack center a 程式設計客棧 要點 父容器container加css屬性 text align center 子容器center加css屬性dis...