[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`水平垂直居中五
