[TOC]
## 实现元素的垂直水平居中
### 方法一
~~~
父元素设置parent{position:relative;}
子元素设置
child{
position:absolute;
left:50%;
top:50%;
margin-left:-50%*child*width;
margin-top:-50%*child*height;
}
~~~
### 方法二
~~~
parent{
position:relative;
}
child{
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
}
~~~
### 方法三:flex布局
~~~
给父元素设置
display:flex;
justify-content: center;
align-items: center;
~~~
### 方法四
~~~
父元素设置parent{position:relative;}
子元素设置
child{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
~~~
### 方法五：grid布局
