centering - css vertical-align middle - CSSを使って、すべてのブラウザで「div」要素を垂直方向にセンタリングするには?

vertical-align center / css / cross-browser / alignment / vertical-alignment

CSSを使用して div を垂直方向の中央に配置したいと思います。テーブルやJavaScriptは必要ありませんが、純粋なCSSだけが必要です。いくつかの解決策を見つけましたが、それらすべてにInternet Explorer6のサポートがありません。

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

Jesse Nickles



Answer #1
#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  / *#contentの高さの半分* /
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}
<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>