使用css3將乙個div水平和垂直居中顯示

使用css3將乙個div水平和垂直居中顯示

方案一：

div絕對定位水平垂直居中【margin:auto實現絕對定位元素的居中】，

**兩個關鍵點：1.上下左右均0位置定位；

2.margin: auto; 其width、height如何更改都是居中顯示的，相容性可以,ie7及之前版本不支援

1

.div1

優點：

1.支援跨瀏覽器，包括ie8-ie10.

2.無需其他特殊標記，css**量少

3.支援百分比%屬性值和min-/max-屬性

4.只用這乙個類可實現任何內容塊居中

5.不論是否設定padding都可居中（在不使用box-sizing屬性的前提下）

6.內容塊可以被重繪。

7.完美支援居中。

缺點：

1.必須宣告高度（檢視可變高度variable height）。

2.建議設定overflow:auto來防止內容越界溢位。（檢視溢位overflow）。

3.在windows phone裝置上不起作用。

瀏覽器相容性：

chrome,firefox, safari, mobile safari, ie8-10.

絕對定位方法在最新版的chrome,firefox, safari, mobile safari, ie8-10.上均測試通過。

方案二：

div絕對定位水平垂直居中【margin 負間距】

此方案**關鍵點：1.必需知道該div的寬度和高度，

2.然後設定位置為絕對位置，

3.距離頁面視窗左邊框和上邊框的距離設定為50%，這個50%就是指頁面視窗的寬度和高度的50%，

4.最後將該div分別左移和上移，左移和上移的大小就是該div寬度和高度的一半。

1

.div1

1

.div1

這或許是當前最流行的使用方法。

測試表明，這是唯一在ie6-ie7上也表現良好的方法。

優點：

1.      良好的跨瀏覽器特性，相容ie6-ie7。

2.      **量少。

缺點：

1.      不能自適應。不支援百分比尺寸和min-/max-屬性設定。

2.      內容可能溢位容器。

3.      邊距大小與padding,和是否定義box-sizing: border-box有關，計算需要根據不同情況。

方案三：

div絕對定位水平垂直居中【transforms 變形】

這是最簡單的方法，不近能實現絕對居中同樣的效果，也支援聯合可變高度方式使用。內容塊定義transform: translate(-50%,-50%)  必須加上

top: 50%; left: 50%;

1

.div1

優點：

1.      內容可變高度

2.      **量少

缺點：

1.      ie8不支援

2.      屬性需要寫瀏覽器廠商字首

3.      可能干擾其他transform效果

4.      某些情形下會出現文字或元素邊界渲染模糊的現象

若只是水平（方向）居中：

1

.div1

只要三句話就可以實現不定寬高水平垂直居中。

1

justify-content:center;//子元素水平居中
2align-items:center;//子元素垂直居中
3display:-webkit-flex;

如何將乙個div水平垂直居中

方法一 div絕對定位水平垂直居中 margin auto實現絕對定位元素的居中 相容性 ie7及之前版本不支援 div方法二 div絕對定位水平垂直居中 margin負間距 div方法三 div絕對定位水平垂直居中 transform變形 相容性 ie8不支援 div方法四 css不定寬高水平垂直...

如何將乙個div水平垂直居中

方案一 div絕對定位水平垂直居中 margin auto實現絕對定位元素居中 相容性 ie7之前版本不支援 div 方案二 div絕對定位水平居中 margin負間距 div 方案三 div絕對定位水平垂直居中 transform變形 相容性 ie8不支援 div 方案四 css不定寬高水平垂直居...

css 使用css3畫乙個扇形

四個半圓疊加，過半調整 z index container div fan 1,fan 3 fan 2,fan 4 fan 1,fan 2 fan 3,fan 4 fan 4 fan 2 fan 3 keyframes zindex 50 50.000001 to keyframes rotate ...