Div 内でコンテンツを垂直方向の中央に配置するにはどうすればよいですか?

定義された Div 寸法内のコンテンツの垂直方向の配置

指定された幅と高さの div 内でコンテンツを垂直方向に中央揃えにすることは、さまざまな方法で実現できます。 。いくつかの人気のあるオプションを見てみましょう:

1.表示: 親 Div の Table-Cell

親 Div の表示を table-cell に設定し、子コンテンツ上でvertical-align: middle を使用すると、垂直方向の中央揃えが可能になります。

.parent-div {
  display: table-cell;
  vertical-align: middle;
}

2.表示: ブロックと表示: テーブルセル

親 div の表示をブロックに設定し、子コンテンツの表示をテーブルセルに設定すると、同様の結果が得られます。

.parent-div {
  display: block;
  text-align: center;
}

.child-content {
  display: table-cell;
  vertical-align: middle;
}

3.親 Div と表示をフローティング: Table-Cell

親 Div をフローティングし、子コンテンツの表示を table-cell に設定すると、垂直方向の中央揃えになります。

.parent-div {
  float: left;
  text-align: center;
}

.child-content {
  display: table-cell;
  vertical-align: middle;
}

4. Position: Relative および Position: Absolute

親 div の位置を相対、子コンテンツの位置を絶対、top を 50%、margin-top を -50% に設定することで、垂直方向のセンタリングを行うことができます。達成。ただし、この方法では、さまざまな高さのシナリオに合わせて手動で調整する必要があります。

.parent-div {
  position: relative;
  height: 100px;
  width: 100px;
}

.child-content {
  position: absolute;
  top: 50%;
  margin-top: -50%;
  width: 100px;
}

以上がDiv 内でコンテンツを垂直方向の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。