web-dev-qa-db-ja.com

位置：相対要素を垂直方向に中央揃えするにはどうすればよいですか？

親コンテナーを垂直方向に中央揃えして、position:relative？親コンテナには、position:absolute。子要素は、親コンテナーの中央に配置されています。

これがスニペットです：

.container {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: red;
  margin: auto;
}

.item {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: blue;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
<div class="container">
  <div class="item"></div>
</div>
cssalignmentcss-positioncenter
12
Vennsoh

1つの解決策は、.containerを2つのラッパーでラップすることです。最初のdisplay: table;とheight: 100%; width: 100%;を、2番目のdisplay: table-cell;とvertical-align: middle;を与えます。また、bodyとhtmlの高さが完全であることを確認してください。

これが少し実用的なデモです： little link 。

もう1つの方法は、top: 50%;を.containerおよびmargin-top: -150px;（300px / 2 = 150px）に適用することです。 （この方法では、コンテナーの正確な高さを知っている必要があるため、mightは正確には望みどおりではないかもしれませんが、 ！）。この後者の方法の少し実用的なデモ： 別の小さなリンク 。

お役に立てば幸いです。

15
Chris