「margin: auto」を使用して DIV を垂直方向の中央に配置できますか?

マージンを使用した DIV の垂直方向の位置合わせ: auto

質問:

マージンを使用して DIV を垂直方向に中央揃えにすることは可能ですか? :自動 自動;?なぜvertical-align:middle;をしないのですか？

答え:

マージンについて:

残念ながら、マージン:auto auto;垂直方向のセンタリングが達成されません。マージンは、垂直方向の配置の DIV などのブロック レベルの要素には適用されません。その結果、margin:top:auto と margin-bottom:auto は無効になります。

vertical-align:middle; について:

vertical-align:middle;これはインライン要素にのみ適用でき、DIV のようなブロックレベル要素には適用できません。

回避策:

マージンを使用して DIV を垂直方向に中央揃えすることはできないため、回避策が推奨されます。うまく機能するアプローチの 1 つは、テーブルのようなコンテナー内でネストされた要素を使用することです。

.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>

以上が「margin: auto」を使用して DIV を垂直方向の中央に配置できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。