垂直居中 - 简书

垂直居中方法一

当一个设置了定位的元素所有的偏移为0且margin为auto时将水平，垂直都居中，且父元素自身的高度可动态变化。

如果是单行文本，行高如块的高度一样时将居中，只一行，行高和元素一样高，居中。

line-height: 600px;
height: 600px;

只可以是文字等一些行内标签，图片不行

让元素相对父元素定位，偏移左50%，上50%，把自身向左移半个宽度，向上移半个高度，同时完成了水平与垂直方向的居中

vertical-align属性，相对兄弟级行高（line-height）来定位,实现垂直居中。

使用div构造一个表格，使用表格特性居中

在某些时候需要将小图片与文字对齐，可以使用对齐的属性absmiddle（绝对居中）

CSS3中可以使用transform移动元素自身的宽度与高度实现居中。
transform用于设置或检索对象的转换，参数translate()指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0。

通过display:flex实现CSS垂直居中的方法是给父元素display:flex;而子元素align-self:center;
这个跟CSS水平居中的原理是一样的，只是在flex-direction上有所差别，一个是row(默认值)，另外一个是column。

具体方式是为父元素添加伪元素:before，使得子元素实现垂直居中。