定義されたディメンションを持つ Div 内でコンテンツを垂直方向の中央に配置するにはどうすればよいですか?

サイズが定義された Div 内でコンテンツを垂直方向に中央揃えにする

事前定義された幅と高さの div を操作する場合、そのコンテンツを垂直方向に配置することができます。共通の課題。さまざまな高さのコンテンツを効果的に中央に配置する方法が必要です。

解決策:

1.親 Div をテーブルセルとして:

親 Div の表示をテーブルセルに設定します。これにより、コンテンツ自体のテーブルセルが不要になります:

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

2.親 Div をブロック、コンテンツ Div をテーブルセルとして:

親 Div の表示をブロックに設定し、コンテンツ Div の表示をテーブルセルに設定します:

.area {
  display: block;
}

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

3.親 Div フローティング、コンテンツ Div をテーブルセルとして:

親 Div をフローティングに設定し、コンテンツ Div をテーブルセルとして設定します。これにはマージンを慎重に考慮する必要があります:

.area {
  float: left;
}

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

4.親 Div が相対位置、コンテンツ Div が絶対位置:

親 div の位置を相対に設定し、コンテンツ div の位置を絶対に設定します。コンテンツの高さを決定し、マージン上部をコンテンツの高さの半分に設定します。このソリューションでは、ケースごとに手動で調整する必要があります:

.area {
  position: relative;
}

.content {
  position: absolute;
  top: 50%;
  height: 50%;
  margin-top: -25%;
}

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