DIV 内の 2 つの段落を垂直方向の中央揃えにするにはどうすればよいですか?

DIV 内の 2 つの要素を垂直方向に中央揃えにする方法

課題: DIV 内で 2 つの段落要素を垂直方向に中央揃えにすることは、確立された以下の手順に従っているにもかかわらず、困難であることが判明しています。

解決策:

DIV 内の要素を垂直方向に中央揃えするには、主に 2 つのアプローチがあります。それは、フレックスボックスと CSS テーブルと位置決めです。

フレックスボックス メソッド

Flexbox を利用すると、最小限の労力で正確な位置合わせを実現できます。コード:

#container {
  display: flex;              
  flex-direction: column;     
  justify-content: center;    
  align-items: center;        
  height: 300px;
  border: 1px solid black;
}

.box {
  width: 300px;
  margin: 5px;
  text-align: center;
}

フレックスボックス方式の利点:

• 最小限のコード
• 配置の簡略化
• 多彩なレイアウト オプション
• レスポンシブデザイン

CSS テーブルと配置方法

別の方法には、CSS テーブルと配置が含まれます:

body {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

#container {
  display: table-cell;
  vertical-align: middle;
}

.box {
  width: 300px;
  padding: 5px;
  margin: 7px auto;   
  text-align: center;
}

フレックスボックスと CSS テーブルを使用する場合および配置:

次の理由により、Flexbox が推奨される選択肢です。その特長:

• 優れた効率
• 包括的なレイアウト機能
• 強化されたブラウザサポート

Flexbox により、垂直方向のセンタリングやその他の高度な位置合わせタスクが簡単に行えますため、最新の Web 開発で推奨される選択肢となっています。

以上がDIV 内の 2 つの段落を垂直方向の中央揃えにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。