CSS を使用して Div を垂直中央に配置するにはどうすればよいですか?

Margin:Auto を使用した Div の垂直方向の位置合わせ

div を水平方向に中央揃えにする場合、一般的に使用される手法は margin: 0 auto です。 。ただし、垂直方向の配置の場合、margin:auto auto 構文は期待どおりに機能しません。

Vertical-Align:Middle が機能しない理由

別の解決策として考えられるのは、 vertical-align: middle、これはインライン レベルの要素にのみ適用され、次のようなブロック レベルの要素には適用されないため失敗します。 divs.

垂直方向の配置のマージンの制限

margin: auto を垂直方向に使用すると、次の問題が発生します:

• Margin-top: auto およびmargin-bottom: 使用値がゼロになる自動結果。
• Margin-top: -50% は、ブロックを含むブロックの高さではなく、幅を基準にして計算されます。

垂直方向の配置に関する回避策

を使用して div を垂直方向に配置することはできません。マージンが煩わしい場合がありますが、回避策はあります。一般的なアプローチの 1 つは、次の 3 つの要素をネストすることです。

.container {
  display: table;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
}
.helper {
  position: absolute;
  top: 50%;
  display: table-cell;
  vertical-align: middle;
}
.content {
  position: relative;
  top: -50%;
  margin: 0 auto;
  width: 200px;
  border: 1px solid orange;
}

<div class="container">
  <div class="helper">
    <div class="content">
      <p>stuff</p>
    </div>
  </div>
</div>

この手法では、div が親コンテナ内で効果的に垂直方向の中央に配置されます。

以上がCSS を使用して Div を垂直中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。