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

Div 要素でボタンを中央に配置するための包括的なガイド

Web デザインの領域では、要素を正確に配置するタスクが最も重要です。たとえば、ボタンを div 内の中央に配置すると、Web サイトの視覚的な魅力とユーザー エクスペリエンスが大幅に向上します。

質問:

希望の配置を実現するには、Web開発者はよく次のような質問に遭遇します:

全幅にわたる div 内でボタンを中央に配置するにはどうすればよいですか? (_100%_) 親コンテナの情報を取得していますか?

答え:

最新のアプローチ: Flexbox の活用

最新のブラウザは、柔軟なレイアウト用に設計された CSS モジュールである Flexbox の機能を備えています。 Flexbox を使用すると、水平軸と垂直軸の両方に沿って要素を正確に配置できるため、ボタンを中央に配置するための理想的なソリューションになります。

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

従来のアプローチ: 位置決めとマージンの利用

Flexbox を完全にはサポートしていない可能性があるブラウザ、または固定寸法が必要な場合、代替方法として位置決めとmargins.

button {
  height: 20px;
  width: 100px;
  margin: -20px -50px;
  position: relative;
  top: 50%;
  left: 50%;
}

追加オプション

水平方向の中央揃えの場合のみ、次の CSS プロパティを考慮してください。

• margin: 0 auto;
• text-align: 中央;親 div に適用されます

結論:

Flexbox と従来の位置合わせ技術の出現により、div 内でボタンを中央に配置するのは簡単な作業になりました。特定のブラウザのサポートとレイアウトの要件に最も適したアプローチを選択して、ボタンが機能的であるだけでなく、見た目も美しいものになるようにしてください。

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