css垂直居中七种方法

1. Margin:0 auto; 适用于块状元素具有宽高。不是用于文本居中。
2. text-align：center可实现文本居中，vertical-align垂直居中文本；可用于内联元素的居中
   text-align+line-height设置与height同大时，文本会水平垂直居中。
3. text-align+display：inline-block实现元素以及文本的水平居中。若父元素与子元素div同高则视觉上会是水平垂直居中（实际上就是水平居中）
4. relative+absolute+margin负元素边距：父元素div是relative，子元素是absolute，那么子元素需要设置top和left会根据父元素的位置进行偏移，再利用margin：负元素宽或者高进行调整。元素都已知宽高，并且可以兼容IE6-7。缺点：灵活性差，不能自适应，宽高不支持百分比和min-和max-属性。IETester工具可以用于页面调整兼容IE系列。 可以用于浮动元素居中定位。
   
5. absolute+margin：auto绝对居中定位。子元素设置top+left+right+bottom：0，margin：auto可以实现居中
   
6. absolute+transform：translate（）+top:50%+left:50%实现如内联img元素未知宽高时的居中定位。子元素添加transform: translate(-50%,-50%)。
   缺点：干扰到其他transform动画效果。适用绝对定位元素的居中。

7. （流行用法）flex + justify-content + align-items：适用于未知宽高的情况。

8. Display:table+子元素table-cell