垂直居中的二十三个方法

点击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

让元素垂直居中的二十三个方法，只列出处理方案，及适用场景，哪个需要我举例子说明的，可以给小郑留言。

方法一、Line-height

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

方法二、Line-height + inline-block

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

方法三、：before + inline-block

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

方法四、absolute + margin负值

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

方法五、absolute + margin auto

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

方法六、absolute + translate

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

方法七、Flex + align-items

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

方法八、Flex + ：before + flex-grow

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

方法九、Flex + margin

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

方法十、Flex + align-self

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

方法十一、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

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

方法二十三、write-mode

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