CSS垂直居中技巧,我只会22个,你会几个?

324 阅读1分钟

1 Line-height

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

2 Line-height + inline-block

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

3 :before + inline-block

适用场景:多对象的css垂直居中

4 absolute + margin负值

适用场景:多行文字的垂直技巧

5 absolute + margin:auto

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

6 absolute + translate

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

7 Flex + align-items

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

8 Flex + :before + flex-grow

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

9 Flex + margin

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

10 Flex + align-self

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

11 Flex + align-content

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

12 Grid + template

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

13 Grid + align-items

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

14 Grid + align-content

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

15 Grid + align-self

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

16 Grid + place-items

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

17 Grid + place-content

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

18 Grid + place-margin

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

19 calc

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

20 Relative + translateY

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

21 padding

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

22 Write-mode

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