水平居中:行內元素、塊級元素、浮動、絕對定位

行內：父元素設置 水平居中: text-align:center 垂直居中：line-height：height值

塊級： 水平居中:margin: 0 auto

垂直居中：

確定高：除父元素line-height外，當前元素：

vertical-align:middle;// 垂直居中對齊

display:inline|inline-block 塊級元素轉行級元素

不確定高：

父元素的padding-top和padding-bottom一樣

浮動：不確定寬和確定寬

不確定寬：父元素的left:50%;和自身的right:50%;position:relative;

<div class="outerbox"> <div class="innerbox">我是浮動的</div> </div>

.outerbox{ float:left; position:relative; left:50%; }

.innerbox{ float:left; position:relative;

確定寬： 不確定寬的方法或算出值

.outerbox{ background-color:pink; width:500px ;

margin: -150px 0 0 -250px; /*使用marin向左移動250px，保證元素居中*/

position:relative; left:50%; top:50%; }

絕對：

1. .outerbox{
2. position: absolute; /*絕對定位*/
3. width: 500px;
4. height:300px;
5. background: red;
6. margin: 0 auto; /*水平居中*/
7. left: 0; /*此處不能省略，且為0*/
8. right: 0; /*此處不能省略，且為0*/
9. }

如何居中一個元素