一共有三個方案：
1，第一種方案主要使用了css3中transform進行元素偏移，效果非常好
這方法功能很強大，也比較靈活，不僅僅侷限在實現居中顯示。 相容方面也一樣拿ie來做比較，第二種方法ie8以上都能使用。 ie8及ie8以下都會出現問題。
<body
>
<
div
id="box"
>
<
div
id="content"
>div被其中的內容撐起寬高
div>
div>
body
>
body,html #box #content
2，第二種利用flex進行布局
很簡單幾句**就實現了。可惜ie瀏覽器並不怎麼支援display:flex;
<body
>
<
div
id="box"
>
<
div
id="content"
>div被內容撐起寬高
div>
div>
body
>
body,html #box #content
3，相容性最好的方案（不能算嚴格意義上的不定寬高，子div不能根據內容大小做改變）：
第一種方法出現的比較早。相容拿ie來做參照——>第一種方法ie7以上都能使用，ie7及ie7以下都會出現問題。
<body
>
<
div
id="box"
>
<
div
id="content"
>
div>
div>
body
>
body,html #box #content
原理不是很明白，但是這種方式並不完善，content只能設定固定寬高，無甚意義。
css 不定寬高的div水平 垂直居中問題
1 相容最佳 body,html box content 第一種方法也是出現的比較早的了。相容拿ie來做參照 第一種方法ie7以上都能使用，ie7及ie7以下都會出現問題。2 實現最佳 body,html box content 第二種利用transform進行元素偏移。這方法功能很強大，也比較靈活...
CSS 水平垂直居中的4種實現（寬高不定）
方案中我也給了寬高,但並不是說寬高固定了。而是以為不給寬高無法看到效果。這個方案不固定寬高的是指,用這個方案之後,如果你父元素 子元素的寬高發生了改變,依舊可以保證是水平垂直居中的位置。下面四種方案都是能夠實現,當父元素或子元素的寬高發生改變時,依舊維持水平垂直居中布局的方案。html css fa...
不定寬高的div如何垂直居中
話不多說，先上效果圖 複製 採用絕對定位 wap center 複製 flex布局 對進行布局的父容器的display進行設定 wap center 複製 布局 父元素設定為 display table cell vertical align middle text align center 子元素...