垂直居中学习笔记

1绝对定位垂直居中

css部分 html
效果图

不定长的绝对定位居中，原理比较简单，首先将top,left各偏移百分之50，这时候左上角的顶点是垂直水平居中的，再用css3的属性transform：translate(X，Y)相对于自身向相反方向各平移百分之五十，就可以实现垂直居中了

2.flex布局实现垂直居中
flex是css新属性，非常好用，兼容性问题也在逐步解决，可以一试

css
html
image.png

justify-content: center;主轴居中
align-items: center;次轴居中
想详细了解flex的可以看阮一峰老师的讲解

3.table-cell垂直居中

css
效果图

简单实用，兼容性好

4.inline-block配合伪元素垂直居中

css
效果图

伪元素是在所使用它的元素内部的最后加入，如开始的代码中就是在.parent:after会在div.parent容器的最后（即div.son后面）加上一个高度为100%宽度为0的元素，原理是同一个容器中的两个inline-block元素设置vertical-align：middle实现的居中对齐，缺点是div.son宽度100%时，无法垂直居中，只能将div.son的宽度缩小一点，用calc()或者设置max-width：99%