CSS垂直居中

方法一：line-height

适用场景：单行文字垂直居中

方法二：line-height + display: inline-block

适用场景：多对象垂直居中

方法三：before +inline-block

适用场景：多对象CSS垂直居中

方法四：absolut + margin

适用场景：多行文字的垂直居中

方法五：absolut + margin auto

适用场景：多行文字的垂直居中

方法六：absolut + transform: translate(X,Y);

适用场景：多行文字的垂直居中

方法七：display: flex; + align-items: center;

适用场景：多行文字的垂直居中

方法八：display: flex; + margin

适用场景：多行文字的垂直居中

方法九：display: flex; + :before + flex-grow

适用场景：多行文字的垂直居中

方法十：display: flex; + align-self

适用场景：多行文字的垂直居中

方法十一：display: flex; + align-content

适用场景：多行文字的垂直居中

方法十二：grid + template

适用场景：多行文字的垂直居中

方法十三：grid + align-items

适用场景：多行文字的垂直居中

方法十四：grid + align-content

适用场景：多行文字的垂直居中

方法十五：grid + align-self

适用场景：多行文字的垂直居中

方法十六：grid + place-items

适用场景：多行文字的垂直居中

方法十七：grid + place-content

适用场景：多行文字的垂直居中

方法十八：grid + margin

适用场景：多行文字的垂直居中

方法十九：display:table-cell

适用场景：多行文字的垂直居中

方法二十：calc

适用场景：多行文字的垂直居中

方法二十一：relative + translate

适用场景：多行文字的垂直居中

方法二十二：padding

适用场景：多行文字的垂直居中

方法二十三：writing-mode

适用场景：多行文字的垂直居中