水平垂直居中方式

第一种是flex布局
flex布局，flex布局首先要把原来的元素的样式给他转换过来，所有的元素都变成了flex的容器（item或项目）。项目默认是按照主轴排列的（这个也可以设置的），每个容器的大小也是可以设置的，这个是比较特殊的使用方式
flex-basis，flex-shrink，flex-grow。

这个适用于与在一条主轴上的布局方式(justify-content)

align-item(设置在交叉轴的布局方式)，交叉轴的布局方式可以设置在垂直方向的布局效果。

2.定位方式
绝对定位+transform(支持翻转，缩小，平移)：绝对定位脱离文档流，但是增加了top，left这类可以可以进行用于移动的属性。适合登录页的设定

绝对定位+已知宽高的硬移动

3.特殊的margin：0 auto;
由浏览器去帮我们分配左右的空间，适合单个盒子的居中

4.text-align vertical-align
text-align设置一个块元素的行内元素的对齐方式。vertical-align设置块元素的行内元素的对齐方式