[TOC]
### 1、水平居中：
* 給div設置一個寬度，然后添加margin:0 auto屬性
```
div{
width:200px;
margin:0 auto;
}
```
### 2、水平垂直居中一
確定容器的寬高 寬500 高 300 的層
設置層的外邊距
```
div {
position: relative; /* 相對定位或絕對定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px; /* 外邊距為自身寬高的一半 */
background-color: pink; /* 方便看效果 */
}
```
### 3、` transform`水平垂直居中二
> 未知容器的寬高，利用 `transform` 屬性
```
div {
position: absolute; /* 絕對定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink; /* 方便看效果 */
}
```
### 4、`flex`水平垂直居中
> 利用 flex 布局
> 實際使用時應考慮兼容性
```
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
老版本
display:-webkit-box;
-webkit-box-pack: cneter;
-webkit-box-align: center
}
.container div {
width: 100px;
height: 100px;
background-color: pink; /* 方便看效果 */
}
```
### 5、 水平垂直居中四
```
margin:auto;
top:0;left:0;right:0;buton:0;
```
### 6、`grid`水平垂直居中五
