[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布局
