** 關鍵詞：**絕對居中
css實現居中有很多方法欺税，在這里我羅列出來三種：
- 第一種
- 優(yōu)點：兼容性好
- 缺點：必須知道寬高赃承，修改不方便，（可以用sass定義變量）
.element {
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
margin-top: -200px; /* 高度的一半 */
margin-left: -300px; /* 寬度的一半 */
}
- 第二種
- 優(yōu)點：利用css3麸俘，不用知道寬高澈魄，響應式布局
- 缺點 : IE9以下不兼容
.element {
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%); /* 50%為自身尺寸的一半 */
}
- 第三種
- 優(yōu)點：兼用性好，響應式布局
.element {
width: 600px; height: 400px;
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
margin: auto; /* 有了這個就自動居中了 */
}
