讓一個元素垂直水平居中的四種方法
第一種方法:
div.box{
weight:200px;
height:400px;
<!--把元素變成定位元素-->
position:absolute;
<!--設定元素的定位位置，距離上、左都為50%-->
left:50%;
top:50%;
<!--設定元素的左外邊距、上外邊距為寬高的負1/2-->
margin-left:-100px;
margin-top:-200px;
}
*相容性好;缺點:必須知道元素的寬高
-------------
第二種方法：
div.box{
weight:200px;
height:400px;
<!--把元素變成定位元素-->
position:absolute;
<!--設定元素的定位位置，距離上、左都為50%-->
left:50%;
top:50%;
<!--設定元素的相對於自身的偏移度為負50%(也就是元素自身尺寸的一半)-->
transform:translate(-50%,-50%);
}
*這是css3裡的樣式;缺點:相容性不好，只支援IE9+的瀏覽器
---------------
第三種方法
div.box{
weight:200px;
height:400px;
<!--把元素變成定位元素-->
position:absolute;
<!--設定元素的定位位置，距離上、下、左、右都為0-->
left:0;
right:0;
top:0;
bottom:0;
<!--設定元素的margin樣式值為 auto-->
margin:auto;
}
*相容性較好，缺點:不支援IE7以下的瀏覽器
第四種方法
一個塊狀元素A內 有若干個塊狀元素B，要達到的效果是 ，所有塊狀元素B 在 元素A 內水平居中顯示。
<div class="A">
<div class="B"></div>
<div class="B"></div>
<div class="B"></div>
</div>
.A｛
width:500px;
backgrond-color:green;
text-align:center
｝
.B｛
width:100px;
height:100px;
magin:5PX;
backgrond-color:green;
display:inline-block；
｝