是时候对 css
居中的各种方式来波总结了!下面是一提到居中就应该联想到的关键属性:
水平垂直居中
flex
1 2 3 4 5
| .outer { display: flex; justify-content: center; align-items: center; }
|
或:
1 2 3 4 5 6 7
| .outer { display: flex; }
.inner { margin: auto; }
|
不需要固定居中元素的宽高。
grid
1 2 3 4 5 6 7 8
| .outer { display: grid; }
.inner { justify-self: center; align-self: center; }
|
或:
1 2 3 4 5 6 7
| .outer { display: grid; }
.inner { margin: auto; }
|
不需要固定居中元素的宽高。
1 2 3 4 5 6 7 8 9 10
| .outer { position: relative; }
.inner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
|
不需要固定居中元素的宽高。
absolute + calc
1 2 3 4 5 6 7 8 9
| .outer { position: relative; }
.inner { position: absolute; left: calc(50% - 50px); top: calc(50% - 50px); }
|
需要固定居中元素的宽高。
absolute + 负 margin
1 2 3 4 5 6 7 8 9 10 11
| .outer { position: relative; }
.inner { position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; }
|
需要固定居中元素的宽高。
absolute + margin: auto
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| .outer { position: relative; }
.inner { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 50px; height: 50px; }
|
需要固定居中元素的宽高。
writing-mode
1 2 3 4 5
| <div class="outer"> <div class="inner"> <div class="content"></div> </div> </div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| .outer { writing-mode: vertical-lr; text-align: center; }
.inner { display: inline-block; width: 100%; height: auto; writing-mode: horizontal-tb; text-align: center; }
.content { display: inline-block; text-align: left; }
|
需要修改 DOM 结构(为了居中元素,需要嵌套两层父元素)。不需要固定居中元素的宽高。
水平居中
行内元素/行内块级元素特有
1 2 3 4
| .box { display: inline-block; text-align: center; }
|
margin: auto
1 2 3 4
| .box { display: block; margin: 0 auto; }
|
需要固定居中元素的宽。
text-align + inline-block
1 2 3 4 5 6 7 8
| .outer { text-align: center; }
.inner { display: inline-block; text-align: left; }
|
上面代码中的 text-align: center;
会使文本居中,但是对块级元素无效,如果将元素设置为 inline-block
,该元素就会被当做文本对待,从而实现元素居中。
不需要固定居中元素的宽。
fit-content + margin
1 2 3 4
| .inner { width: fit-content; margin: auto; }
|
会使元素的宽度改变(同内容宽度)。
1 2 3 4
| .outer { width: fit-content; margin: auto; }
|
即使子元素是浮动元素也适用。
垂直居中
table-cell + vertical-align
1 2 3 4
| .outer { display: table-cell; vertical-align: middle; }
|
不需要固定居中元素的高。
inline-block + line-height
1 2 3 4
| .parent { height: 100px; line-height: 100px; }
|
元素的 height
和 line-height
相同的时候,会使其文本内容垂直居中。因此该方案利用了这一特点,不过文本内容虽然垂直居中了,但是元素并没有,因此再将元素设置为 inline-block
,这样元素就会被当做文本对待了。同时由于具有了 inline
属性,vertical-align: middle;
也就可以生效了。
1 2 3 4 5 6 7 8 9
| .outer { line-height: 300px; }
.inner { line-height: initial; vertical-align: middle; display: inline-block; }
|
需要知道其父元素高度,不需要固定居中元素的高。
inline-block + vertical-align
1 2 3 4 5 6 7 8 9 10 11
| .outer::after { content: ''; display: inline-block; vertical-align: middle; height: 100%; }
.inner { display: inline-block; vertical-align: middle; }
|
在居中元素的父元素上,使用一个伪元素,将这个伪元素设置为 inline-block
后,就好像它原来就是一个真正的 DOM 元素,存在于页面上。然后再将居中元素设置为 inline-block
,根据 inline-block
的特性(多个相邻的 inline-block
元素会横向并排显示),居中元素会和伪元素横向并排显示。并且设置 vertical-align: middle;
后,它们会互相垂直对齐,最后将伪元素高度撑起来 height: 100%;
,居中元素会对齐伪元素,从而实现了垂直居中。
不需要固定居中元素的高。