不定高垂直居中(核心代码)
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,就如下图(我们正需要的垂直居中)。
该布局的优缺点:
优点: 只要在父元素上设置就行。
缺点:只支持高版本的浏览器。