全幅の Div 内でボタンを水平方向 (および垂直方向) に中央に配置するにはどうすればよいですか?

幅 100% の Div 内のボタンを中央に配置する

CSS の一般的なニーズは、全体にまたがる div 内のボタンを中央に配置することです。ページの幅。これを実現するには、いくつかの方法があります。

1 つの方法は、Flexbox を使用することです。 div の表示プロパティを flex に設定し、justify-content: center と align-items: center を追加すると、div はその子を垂直方向と水平方向に中央揃えにする flexbox コンテナになります。

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
button {
  /* Other styles */
}

垂直方向の配置の場合は必要ありません。単純に justify-content: center を使用できます。

#wrapper {
  display: flex;
  justify-content: center;
}
button {
  /* Other styles */
}

より伝統的なアプローチの場合は、ボタンの margin プロパティを次のように設定できます。自動。これにより、ボタンが div 内で水平方向に中央に配置されます。

button {
  margin: 0 auto;
  /* Other styles */
}

または、div の text-align プロパティを中央に設定することもできます。これにより、ボタンを含む div 内のすべての要素が中央に配置されます。

div {
  text-align: center;
}
button {
  /* Other styles */
}

これらは、div 内でボタンを中央に配置するためのいくつかの方法にすぎません。最適なアプローチは、レイアウトの特定の要件によって異なります。

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