css 垂直居中

实现多行文字垂直居中,如下图

flex 方法

将display设置为flex,水平位置justify-content设置为center,垂直位置flex-direction设置为column;
然后根据position: absolute定位到left:50%;top:0的位置

See the Pen Jbrrpo by janceChun (@janceChun) on CodePen.

transform:translate 方法

设置position: absolute绝对定位,然后垂直位置下移50%既top:50%;transform设置垂直位置为-50%,元素刚好垂直居中

See the Pen oYGoXZ by janceChun (@janceChun) on CodePen.

vertical-align 行内元素基线垂直对齐

图片的vertical-align 基准线跟 文字的 vertical-align基准线对齐

See the Pen oYGojW by janceChun (@janceChun) on CodePen.