☰

CSS を使用してすべてのブラウザで div 要素を垂直方向に中央揃えにするにはどうすればよいでしょうか? 質問する

tag-icon • tag-icon html css alignment vertical-alignment centering
CSS を使用してすべてのブラウザで div 要素を垂直方向に中央揃えにするにはどうすればよいでしょうか? 質問する

CSS を使用して垂直方向に中央揃えにしたいですdiv。テーブルや JavaScript は必要なく、純粋な CSS のみが必要です。いくつかの解決策を見つけましたが、いずれも Internet Explorer 6 をサポートしていません。

<body>
    <div>Div to be aligned vertically</div>
</body>

divInternet Explorer 6 を含むすべての主要ブラウザで垂直方向に中央揃えするにはどうすればよいでしょうか?

ベストアンサー1

以下は、固定幅、可変高さのコンテンツ ボックスを垂直方向と水平方向に中央揃えするために私が構築できた、最も優れた総合的なソリューションです。これは、Firefox、Opera、Chrome、Safari の最新バージョンでテストされ、動作しました。

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /* Whatever width you want */
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

動的コンテンツを使用した動作例を見る

柔軟性をテストするために動的コンテンツをいくつか組み込みましたが、何か問題があるかどうか知りたいです。中央揃えのオーバーレイ (ライトボックス、ポップアップなど) でもうまく機能するはずです。

おすすめ記事