第一種方法:
div.box{
weight:200px;
height:400px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-200px;
*相容性好;缺點:必須知道元素的寬高
第二種方法：
div.box{
weight:200px;
height:400px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
*這是css3裡的樣式;缺點:相容性不好，只支援ie9+的瀏覽器
第三種方法
div.box{
width:200px;
height:400px;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
*相容性較好，缺點:不支援ie7以下的瀏覽器
第四種方法
場景： 乙個塊狀元素a內 有若干個塊狀元素b，要達到的效果是 ，所有塊狀元素b 在 元素a 內水平居中顯示。
首先，我們要設定元素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，
這樣我們的目的就達到了，請看效果：
完美！*相容性較好，父元素和子元素的寬度都要已知
讓元素水平垂直居中的四種方法
將子元素的寬和高設定為百分數，如寬設定為 80 則需要向 x 軸偏移 10 那麼 translatex 為10 80 0.125，即 12.5 如果高設定為 60 則需要向 y 軸偏移 20 那麼 translatey 為20 60 33 即子元素需要設定 transfrom translate 1...
元素水平垂直居中的四種方式
1.flex彈性盒 使用flex彈性盒的居中方式，我們只需要給與其父元素設定 這三個屬性就可以讓其內部元素水平垂直居中 父元素內只有乙個子元素 2.position定位 要求父元素是定位屬性元素也就是position不為static 2.1margin負值 給要水平垂直的元素設定屬性 2.2marg...
如何讓乙個元素水平垂直居中？
這問題大概分為兩種型別，看要求，元素有沒有被設定寬高 1.利用絕對定位 box2.先把元素的左上角定位到 點，在向左和上移動自身寬高的一半 使用margin box3.先把元素的左上角定位到 點，在向左和上移動自身寬高的一半 使用transform平移 box4.先把元素的左上角定位到 點，在向左和...