一、行級元素水平居中對齊（父元素設置 text-align:center）

1. <div style="width: 200px; height: 100px;border: 1px solid;text-align:center;">
2. <span>行級元素垂直居中</span>
3. </div>

二、塊級元素水平居中對齊（margin: 0 auto）

copy

1. <div style="width: 200px; height: 100px;border: 1px solid;text-align: center;">
2. <div style="border: 1px solid red;margin: 0 auto;height: 50px;width: 80px;"> 塊級元素水平居中</div>
3. </div>

三、讓絕對定位的元素水平居中對齊

[css] view plain copy

1. .center{
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. }

經驗分享：水平居中的主要屬性有

1. text-alin:center;

2. margin:0 auto

3. position:relative|absolute; left:50%;

html+css居中問題