居中的效果是Web开发中常见的需求,几乎和阴影、圆角可以并列为产品三大法宝,本文的目的是捋顺开发中常用的居中计较,方便记忆和日后查阅。为了方便演示,本文所有 demo 使用 React 的 CSS-in-JS 语法完成。

单行文本

height、lineHeight、textAlign

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div
style={{
boxSizing: 'border-box',
height: '100px',
width: '300px',
background: 'purple',
color: '#fff',
textAlign: 'center',
lineHeight: '98px',
border: '1px solid red',
}}
>
单行文本
</div>

Flex

1
2
3
4
5
6
7
8
9
10
11
12
13
<div
style={{
height: '100px',
width: '300px',
background: 'purple',
color: '#fff',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
单行文本
</div>

多行文本居中

table-cell、vertical-align

1
2
3
4
5
6
7
8
9
10
11
12
13
<div
style={{
boxSizing: 'border-box',
height: '100px',
width: '300px',
background: 'purple',
color: '#fff',
display: 'table-cell',
verticalAlign: 'middle',
}}
>
多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本
</div>

Flex

1
2
3
4
5
6
7
8
9
10
11
12
13
<div
style={{
height: '100px',
width: '300px',
background: 'purple',
color: '#fff',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本
</div>

图片居中

table-cell、verticalAlign、textAlign

1
2
3
4
5
6
7
8
9
10
11
12
<div
style={{
height: '100px',
width: '300px',
background: 'purple',
display: 'table-cell',
verticalAlign: 'middle',
textAlign: 'center',
}}
>
<img src="http://iph.href.lu/50x50" alt="" />
</div>

Flex

1
2
3
4
5
6
7
8
9
10
11
12
<div
style={{
height: '100px',
width: '300px',
background: 'purple',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<img src="http://iph.href.lu/50x50" alt="" />
</div>

块级元素

子绝父相

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div
style={{
height: '100px',
width: '300px',
background: 'purple',
position: 'relative',
}}
>
<div
style={{
background: '#fff',
width: '50px',
height: '50px',
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translate(-50%,-50%)',
}}
/>
</div>

Flex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div
style={{
height: '100px',
width: '300px',
background: 'purple',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<div
style={{
background: '#fff',
width: '50px',
height: '50px',
}}
/>
</div>

联系作者

本文首发于个人博客:https://youngjuning.js.org/

作者微信 知识星球 赞赏作者