不定高垂直居中的三种方法

不定高垂直居中（核心代码）

1.display:table-cell + vertical-align:middle

父元素（.parent）设置display：table-cell 变成单元格，再设置vertical-align:middle （改属性可以作用于inline inline-block table何table-cell 元素）
该布局的优缺点：
优点：兼容性比较好（虽然table-cell不支持IE6 7 但把结构改成table结构就兼容了）。
缺点：未知。

2.sbsolute + transform

父元素设置position:relative 可使它做为参照物,子元素设置position:absolute top:50%,会使子元素向下多移动盒子的高度一半，再设置transform:translateY(-50%)看使盒子向上移动盒子的高度一半（transform：translateY(-50%)的百分比参照物是自己）。
该布局的优缺点：
优点：absolute脱离文档流，不会影响到其他子元素。
缺点：transform属于css3的内容，不支持IE6 7 8 版本，还要给不同浏览器加上不同前缀。

3.display：flex + align-items：center

当只给父元素设置display：flex 时 就会变成如上图， 因当父元素设置了这值时，items的align-items值默认是stretch(被拉伸适应容器)，当设置值为center，就如下图（我们正需要的垂直居中）。

该布局的优缺点：
优点： 只要在父元素上设置就行。
缺点：只支持高版本的浏览器。