垂直居中怎么设置（垂直居中的二十三个方法）

点击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题，下面我们就来说一说关于垂直居中怎么设置?我们一起去了解并探讨一下这个问题吧!

垂直居中怎么设置

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

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

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

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

,