不定寬高垂直居中分析

2021-09-06 23:35:28 字數 3073 閱讀 4916

昨天做移動專案是，遇到這樣乙個案例，如圖，容器隨著視口寬度進行自由拉伸擴張，不定寬高，垂直居中：

當時做這個布局的時候，我一直想到用display:table-cell通過vertical-align:middle，來實現居中，可以當我在同乙個節點用position:absolute，會導致此居中問題失效。

最後想到的解決方案，案例如下，不定寬高垂直居中：

水平垂直居中的隨意內容

下面我們將分別介紹三種垂直居中的解決方案：

已咀嚼一下以前的幾個老知識點：

1.水平居中知識點

text-align:center
對於水平居中可能不需要太多的介紹，所有主流瀏覽器均支援 text-align

屬性，只需要取值 center 即可；

2.vertical-align知識點

vertical-align適用於 inline level, inline-block level 及 table-cells 元素上
所有主流瀏覽器均支援 vertical-align

屬性，所以使用該屬性來實現垂直居中是乙個不錯的想法；

一、利用display:table-cell;vertical-align:middle;進行不定高度，垂直居中 例子demo

水平垂直居中的隨意內容


#demo


#demo p
既然table能實現，自然也就會想到將 display 設定為table系value來實現。當然，該方案是有侷限性的，因為ie8以下的瀏覽器不支援 display

的table系value，所以你只能在ie8及以上瀏覽器以及非ie瀏覽器下才能看到效果；

二、利用display:inline-block;vertical-align:middle;進行不定高度，垂直居中  例子demo

"


demo


">


水平垂直居中的隨意內容


#demo


#demo:after


#demo p
這裡有一點需要非常注意：參照以上**，如果我們的內容容器p的寬度為100%時，就會導致#demo:after被擠出不在一行，這個是由於inline元素間隔導致的，可以設定font：0消除，如果為了保持全相容，可以不用偽類，使用span標籤去替代。

完美解決方案：例子demo

"


demo


">


這是乙個終極實現的水平垂直居中例項


#demo


#demo:after,#demo span


#demo:after


#demo p
三、利用translate3d(-50%,-50%,0)實現垂直居中，只支援高版本

class="


main


">


class="


box">555666
四、利用兩級巢狀，兩次left，top實現居中

sssssfdsfd
利用兩個不定寬高的div相嵌。外圍的div用absolute定位，left:50%,top:50%。這樣外圍的div的左上角處於水平垂直居中狀 態。內部的div使用relative定位，這樣可以利用自身的寬高撐開外圍的div，再用left:-50%,top:-50%;（用margin- left,margin-top也可以，就是利用取值的是參照外圍div的寬高的原理）實現內部div的幾何中心與外圍的div左上角重合。這樣實現了垂 直水平劇中。這個原理有點像使用translate(-50%,-50%)來實現水平垂直居中，不過我用的是css1.0的**，所以相容性很好 ie6.0~ie11 chrome,firefox都可以

五、使用 box-align and box-pack 屬性居中，必須在box-align控制垂直方向，box-pack水平方向，但是這種只能在display:box彈性盒子容器下使用

相容性，firefox，chrome，ios7以上，andriod4.0以上

親測:小公尺mi2cs、小公尺mi3/魅族魅藍note、榮耀6、iphone4s、iphone6 plus 通過。

class="


flexbox


">


class="


box">


我是居中對齊的。


我不帥，我不帥。


class="


boxflex


">


class="


boxlf


">


class="


box">


我是居中對齊的ss。


我不帥，我不帥。


注釋：ie 不支援 box-pack 和 box-align 屬性。
資料參考：

未知尺寸元素水平垂直居  

不定寬高的div如何垂直居中

話不多說，先上效果圖 複製 採用絕對定位 wap center 複製 flex布局 對進行布局的父容器的display進行設定 wap center 複製 布局 父元素設定為 display table cell vertical align middle text align center 子元素...

不定寬高的div中 文字垂直居中

最近公司的專案裡面有個要調樣式的頁面 可能是很長很長時間沒有寫過css樣式方面的東西了.吐槽一下我自己,只是乙個簡單的介面就讓我苦惱了很久 需求 在不定寬高的div中 文字垂直居中 div1的寬高都是百分比 div2的寬高也都是百分比 div3把文字包起來,不設定寬高,由內容撐開 div2 設定 p...

讓不定寬元素垂直居中

前情提要 margin auto預設支援水平居中，不支援垂直居中 父元素 display grid，子元素 margin auto 父元素 display flex，子元素 margin auto 父元素 position relative，子元素 position absolute left 50...