垂直居中的九种方式垂直居中的九种方式 1.table cell (★★★☆☆) 2.absolute positioni

垂直居中的九种方式

1.table cell (★★★☆☆)

<div style="display: table;">
  <div style="display: table-cell; vertical-align: middle;">
    Content.
  </div>
</div>

2.absolute positioning (☆☆☆☆☆)

<div style="position: relative;">
  <div style="position: absolute; top: 50%; transform: translateY(-50%);">
    Content.
  </div>
</div>

3.inline content (☆☆☆☆☆)

<div class="container">
  <div class="content">Content.</div>
</div>

.container::before {
  content: '';
  height: 100px;
  display: inline-block;
  vertical-align: middle;
}
.content {
  display: inline-block;
  vertical-align: middle;
}

或

.content {
  display: inline-block;
  line-height:100px;
}

4.single-line flexbox (★★★☆☆)

<div style="display: flex; align-items: center;">
  <div>Content.</div>
</div>

或

<div style="display: flex; flex-flow: column; justify-content: center;">
  <div>Content.</div>
</div>

5.multi-line flexbox (★★★☆☆)

<div style="display: flex; flex-flow: row wrap; align-content: center;">
  <div>Content.</div>
</div>

6.grid content (★★★★☆)

<div style="display: grid; align-content: center;">
  <div>Content.</div>
</div>

7.grid cell (★★★★☆)

<div style="display: grid; align-items: center;">
  <div>Content.</div>
</div>

8.auto-margin (★★☆☆☆)

<div style="display: grid;">
  <div style="margin-block: auto;">
    Content.
  </div>
</div>

9.this post in 2024 (★★★★★)

<div style="align-content: center;">
  <code>align-content</code> just works!
</div>