css中垂直居中的方法

      在前端做了也快三年了，慢慢感觉很多时候垂直居中是最常用的布局方式，虽然自己的布局还可以，但是我觉得对于常用的样式总结出来，形成自己的样式库，这样对于提高工作的效率来说，有很大的帮助。今天我就把工作中常用到的垂直居中的方式给大家总结一下，也算是对自己工作的一个总结吧。

第一种：使用定位来垂直居中：父节点使用的是相对定位，子节点使用绝对定位，通过定位位置的设置，然后利用负边距来实现垂直居中。

第二种：绝对定位和定位四边0设置。此方法和上面第一种很相似，都是通过定位来设置它的位置，设置margin：auto.已达到垂直居中的效果：

第三种：通过方法一的原理，我们可以使用translate来实现的对位置的移动：

第四种：通过改变布局的方式，使用flex布局的方式，来进行布局，结合margin：auto，来实现垂直居中的实现：移动端很多平均布局，使用flex布局是十分合适的.

第五种：使用css3的一些新属性来进行垂直居中：缺点就是浏览器对此属性的兼容不是很充分。css3有很多不错的属性，使用好css3也是一个前端工程师最起码的技能

第六种：通过伪类after来占位，伪类的高度与父节点一样的特点，结合vertical-middle的属性，使得位置居中：

第七种：使用设置父节点display：table属性，子节点：display：table-cell属性，来实现垂直居中的效果。

第八种：使用grid网格布局居中。

其实垂直居中就是位置上的设置，无论是使用伪类，定位，布局方式的修改，还是css3的属性，只要符合数学概念上的垂直居中，很多方法都是可以变通的。希望和所有的前端小伙伴们一起共勉.....