BinaryDevelop
  1. ホーム
  2. css

[解決済み】CSSを使用して、すべてのブラウザでdiv要素を垂直方向に中央に配置するにはどうすればよいですか？

2022-03-18 22:18:46

質問

を中央に配置したい。 div をCSSで縦書きにする。テーブルやJavaScriptは使わず、純粋なCSSのみで対応したい。いくつかの解決策を見つけましたが、それらすべてはInternet Explorer 6のサポートが欠落しています。 

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

を中央に配置するにはどうすればよいですか？ div Internet Explorer 6 を含むすべての主要なブラウザで、垂直に表示されますか？

解決方法は？

以下は、固定幅を垂直方向と水平方向にセンタリングするために私が構築した最良のオールラウンドなソリューションです。 フレキシブルハイト コンテンツボックスです。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>

ダイナミックコンテンツの動作例を見る

柔軟性をテストするために、いくつかの動的コンテンツを組み込んでみました。ライトボックスやポップアップなど、中央に配置されたオーバーレイでもうまくいくはずです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します