css 不定寬高的div水平 垂直居中問題

2021-09-11 18:50:58 字數 610 閱讀 6707

1、相容最佳

body,html

#box

#content

第一種方法也是出現的比較早的了。相容拿ie來做參照——>第一種方法ie7以上都能使用,ie7及ie7以下都會出現問題。

2、實現最佳

body,html

#box

#content

第二種利用transform進行元素偏移。這方法功能很強大,也比較靈活,不僅僅侷限在實現居中顯示。  相容方面也一樣拿ie來做比較,第二種方法ie8以上都能使用。  ie8及ie8以下都會出現問題。

3、**最簡單①

body,html

#box

#content

第三種利用彈性盒模型進行布局,很簡單幾句**就實現了。可惜ie瀏覽器並不怎麼支援display:flex;

4、**最簡單②

body,html  

#box  

#content  

第三種用的也是彈性盒模型進行布局,不過相對於display:flex;來說,display:box;是較老版本的彈性盒模型。也是很簡單幾句**就實現了。可惜ie瀏覽器也並不支援display:box;

抄襲:

css實現不定寬高的div水平 垂直居中

一共有三個方案 1,第一種方案主要使用了css3中transform進行元素偏移,效果非常好 這方法功能很強大,也比較靈活,不僅僅侷限在實現居中顯示。相容方面也一樣拿ie來做比較,第二種方法ie8以上都能使用。ie8及ie8以下都會出現問題。body div id box div id conten...

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

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

CSS 水平垂直居中的4種實現(寬高不定)

方案中我也給了寬高,但並不是說寬高固定了。而是以為不給寬高無法看到效果。這個方案不固定寬高的是指,用這個方案之後,如果你父元素 子元素的寬高發生了改變,依舊可以保證是水平垂直居中的位置。下面四種方案都是能夠實現,當父元素或子元素的寬高發生改變時,依舊維持水平垂直居中布局的方案。html css fa...