CSS垂直居中技巧,我只会22个,你会几个?
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
适用场景:多行文字的垂直居中技巧