div盒子水平垂直居中的方法

這個問題比較老，方法比較多，各有優劣，著情使用。

一、盒子沒有固定的寬和高

方案1、transforms 變形

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

top: 50%; left: 50%;

優點：

1.      內容可變高度

2.      **量少

缺點：

1.      ie8不支援

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

3.      可能干擾其他transform效果

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

<

div 
class
>
我不知道我的寬度和高是多少，我要實現水平垂直居中。
div>

方案二2、在父級元素上面加上上面3句話，就可以實現子元素水平垂直居中。

<

div 
class
>
我不知道我的寬度和高是多少，我要實現水平垂直居中。
div>

width: 500px;

height: 300px;

background: orange;

color: #fff;

/*只需要在父元素上加這三句*/

justify-content: center; /*子元素水平居中*/

align-items: center; /*子元素垂直居中*/

display: -webkit-flex;}

二、盒子有固定的寬和高

方案1、margin 負間距

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

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

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

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

<

div 
class
>
我知道我的寬度和高是多少，我要實現水平垂直居中。
div>

方案2、margin:auto實現絕對定位元素的居中（該方法相容ie8以上瀏覽器）

此方案**關鍵點：1、上下左右均0位置定位；

2、margin: auto;

<

div 
class
>
我不知道我的寬度和高是多少，我要實現水平垂直居中。
div>

div盒子水平垂直居中方法

這個問題比較老，方法比較多，各有優劣，著情使用。一 盒子沒有固定的寬和高 方案1 transforms 變形 這是最簡單的方法，不僅能實現絕對居中同樣的效果，也支援聯合可變高度方式使用。內容塊定義transform translate 50 50 必須加上 top 50 left 50 優點 1.內...

div盒子水平垂直居中的方法推薦

父盒子是position relative 方法一 寬高確定 div絕對定位水平垂直居中 margin 負間距 方法二 寬高確定 div絕對定位水平垂直居中 margin auto實現絕對定位元素的居中 相容性 ie7及之前版本不支援 方法三 寬高不定 div絕對定位水平垂直居中 transform...

div盒子水平垂直居中的幾種方法

一 盒子沒有固定的寬和高 方案1 使用transforms屬性的translate平移 這是最簡單的方法，不僅能實現絕對居中同樣的效果，也支援聯合可變高度方式使用。我不知道我的高度和寬度是多少。transform translate 50 50 分別向左向上移動自身長寬的50 使其位於中心。二 盒子...