第一種方法:
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{
width: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的大小為500px，設置背景色為green方便查看
.A｛
width:500px;
backgrond-color:green;
｝
然后， 設置所有元素B 的寬度為100px，高度為100px，外邊據都為5px，背景色為#000方便查看
.B｛
width:100px;
height:100px;
magin:5PX;
backgrond-color:green;
｝
當然現在的效果應該是這樣的
我們要做的就是，先把所有元素B設置為行內塊元素,讓他們都排成一行， display:inline-block；
最后就是讓所有的元素B居中了， 到這里，相信很多人就猜到下一步要做什么了，我錦上添花，解釋一下。
先想一想，如果是行內元素， 我們一般讓它怎么居中呢？答：當然是給它的父容器加一個text-align:center的樣式。
這里我們已經把所有的元素B變成了行內塊， 也就有了行內元素的特性，所以，我們下一步要做的就是給元素A加text-align:center，
這樣我們的目的就達到了，請看效果：
完美！
*兼容性較好，父元素和子元素的寬度都要已知