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

vertical-align div / css / cross-browser / vertical-alignment / centering

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

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

Jesse Nickles



Answer #1
div.outer-div {
  height: 170px;
  width: 300px;
  background-color: lightgray;
}

div.middle-div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>