Skip to content

垂直居中的方式

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!