15

親コンテナをキャンバス に垂直方向に中央揃えするにはどうすればよい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>

4

1 に答える 1

19

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

ここにちょっとしたデモがあります: little link .

もう 1 つの方法は、 and ( ) に適用top: 50%;することです。(この方法ではコンテナの正確な高さを知る必要があることに注意してください. この後者の方法の小さな動作デモ:別の小さなリンク..containermargin-top: -150px;300px / 2 = 150px

それが役に立ったことを願っています！

于 2012-08-28T11:19:12.267 に答える