垂直居中的方式
1.table cell (★★★☆☆)
html
<div style="display: table;">
<div style="display: table-cell; vertical-align: middle;">
Content.
</div>
</div>
Content.
2.absolute positioning (☆☆☆☆☆)
html
<div style="position: relative;">
<div style="position: absolute; top: 50%; transform: translateY(-50%);">
Content.
</div>
</div>
Content.
3.inline content (☆☆☆☆☆)
html
<div class="container">
<div class="content">Content.</div>
</div>
css
.container::before {
content: '';
height: 100px;
display: inline-block;
vertical-align: middle;
}
.content {
display: inline-block;
vertical-align: middle;
}
或
css
.content {
display: inline-block;
line-height:100px;
}
4.single-line flexbox (★★★☆☆)
html
<div style="display: flex; align-items: center;">
<div>Content.</div>
</div>
或
html
<div style="display: flex; flex-flow: column; justify-content: center;">
<div>Content.</div>
</div>
Content.
Content.
5.multi-line flexbox (★★★☆☆)
html
<div style="display: flex; flex-flow: row wrap; align-content: center;">
<div>Content.</div>
</div>
Content.
6.grid content (★★★★☆)
html
<div style="display: grid; align-content: center;">
<div>Content.</div>
</div>
Content.
7.grid cell (★★★★☆)
html
<div style="display: grid; align-items: center;">
<div>Content.</div>
</div>
Content.
8.auto-margin (★★☆☆☆)
html
<div style="display: grid;">
<div style="margin-block: auto;">
Content.
</div>
</div>
Content.
9.this post in 2024 (★★★★★)
html
<div style="align-content: center;">
<code>align-content</code> just works!
</div>
align-content
just works!