分享几个初级的垂直居中方法（效果都一样，所以就不放效果图，见谅）

 一、 垂直居中，将子元素进行绝对定位，上和左移动50%，再使用margin进行上和左移动，移动为子元素宽高的一半方可实现垂直居中。

二、使用transform和定位来进行div的垂直居中布局。

三、使用父元素display:table-cell; text-align:center;vertical-align:middle，子元素使用display:inline-block。

效果图：

四、利用inline-block的vertical-align: middle去对齐before伪元素，before伪元素的高度与父对象一样，就实现了高度方向的对齐。居中块的尺寸可以做包裹性、自适应内容，兼容性也相当好。缺点是水平居中需要考虑inline-block间隔中的留白（代码换行符遗留问题。）。（宽度是已知的，高度可以是未知的）

效果图：

五、绝对定位+transform反向偏移。

六、使用最简单暴力的方法left,top,bottom,right都设置0，进行子绝父相定位，加上margin：auto

以上六种垂直居中的步骤希望对大家能够有所帮助，有意见也希望大家都能够提出来，垂直居中不止以上六种，还有很多很多，希望大家能够留言补充。谢谢。