div水平居中 垂直居中

1.div 本身水平居中  margin： 0 auto；

2.子代 水平居中：父元素：text-align:center，子元素：inline/inline-block；

 

3. 定位，子代水平垂直居中（方法少用；會出現兼容性問題，或者沒法自適應響應式佈局）

<div class='father'>

<div class='child'></div>

</div>

.father{

　　margin: 0 auto;

　　width: 500px;

　　height:500px;

　　background-color: aqua;

　　position: relative;

 

}

.child{

　　position: absolute;

　　top:50%;

　　left: 50%;

　　margin-left:-150px;

　　margin-top:-150px;

　　width: 300px;

　　height:300px;

　　background-color: brown;

}

或者

.father{

　　margin: 0 auto;

　　width: 500px;

　　height:500px;

　　background-color: aqua;

　　position: relative;

 

}

.child{

　　margin:auto;

　　position: absolute;

　　top:0;

　　left:0;

　　bottom:0;

　　right:0;

　　width: 300px;

　　height:300px;

　　background-color: brown;

}

 

默認狀況下html和body的高度是由內容撐起來的高度

body.html{

　　width：100%；

　　height：100%；

　　margin：0；

　　padding：0；

 

}

垂直居中：咱們先要設置div元素的祖先元素html和body的高度爲100%（由於他們默認是爲0的/內容撐起來的高度）而且清除默認樣式，即把margin和padding設置爲0（若是不清除默認樣式的話，瀏覽器就會出現滾動條，聰明的親，本身想一想問什麼）。

因爲position的值爲static（靜止的、不能夠移動的），元素在文檔流裏是從上往下、從左到右緊密的佈局的，咱們不能夠直接經過top、left等屬性改變它的偏移。因此，想要移動元素的位置，就要把position設置爲不是static的其餘值，如relative,absolute,fixed等。而後，就能夠經過top、bottom、right、left等屬性使它在文檔中發生位置偏移（注意，relative是不會使元素脫離文檔流的，absolute和fixed則會！也就是說，relative會佔據着移動以前的位置，可是absolute和fixed就不會）。

用本身的話說：頁面默認，流式佈局，從上到下，從左到右，position默認是static的靜止狀態，也就是說，偏移屬性top ,right,,left,buttom,只有在定位的時候才能用得上，知道具體高能夠用像素px， 不知道能夠用百分比定位%；vh，wh

經過設置div的transform: translateX(-50%)，意思是使得div向左平移（translate）自身高度的一半(50%)。

 

 垂直居中：

1.【單行文本】垂直居中 【子元素行高=父元素】

 

　line-height具備繼承性，只對line 或者  line-block  起做用  對塊級元素不起做用

　做用對象：對於inline和inline-block元素做用於元素自身,對於block元素,子元素經過繼承被做用

#child { line-height: 200px; }

 2.【圖片】垂直居中　【設置本身】

　　vertical-align 只能設置本身，屬性設置行內元素的垂直對齊方式。

　　vertical-align：做用於行內塊的話，能夠用在本身身上，讓本身處於垂直居中的位置。

　　vertical-align: middle;

　img {
　　　vertical-align: middle; 　}
vertical-align:text-top;/vertical-align:text-button

3.通用垂直居中 　【表格方式】

<div id="parent"> 　　<div id="child">Content here</div> </div>

#parent {display: table;} #child { display: table-cell; vertical-align: middle; }

 

4.【定位】垂直居中 （IE7如下不兼容）

定位垂直居中兩句代碼{

　　　　　　position:relative;

　　　　　　top:50%;

　　　　　　transform:translateY(50%)

　　　　　　}

 

5.【浮動】