元素居中方案

水平居中： 如果是内联元素，设置父元素为text-align: center; 如果是块级元素，设置该元素为margin: auto;

垂直居中：

1. 绝对定位方案。

已知宽高：position: absolute; top: 50%; left: 50%；margin-top: -(自身高度/2)px; margin-left: -(自身宽度/2)；

未知宽高： position: absolute; top: 50%; left: 50%；transform: translate(-50%, -50%);

2. 视图单位的解决方案（vh）。

vh、vw： 全称viewport-relative,相对视窗长度单位。vw表示相对于视图的宽度，比如1vw表示当前视图宽度的1%；vh同理。

当前元素设置为：margin: 50vh auto 0; transform: translateY(-50%);

3. flex布局解决方案

父元素设置： display：flex; line-height: 100vh; margin: 0;

子元素设置： margin：auto;