CSS を使用して Div 内でボタンを水平方向および垂直方向の中央に配置するにはどうすればよいですか?

Div 内のボタンの中央揃え

CSS では、親要素内のコンテンツを中央に配置するための手法がいくつかあります。 div 内でボタンを水平方向に中央に配置する最も一般的な方法を見てみましょう。

Flexbox の使用 (最新のアプローチ)

Flexbox は、柔軟で応答性の高い CSS レイアウト モジュールです。レイアウト。 Flexbox を使用してボタンを垂直方向と水平方向の中央に配置するには:

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

固定幅とマージンの使用 (従来のアプローチ)

ボタンの幅が固定で親がある場合div の幅は固定または 100% です。マージンを使用して中央揃えにすることができますit:

button {
  margin: 0 auto;
}

水平方向の中央揃えの代替方法

• Text-align: 親の text-align プロパティを設定しますに分割します"center."
• margin-left: ボタンの幅の半分を計算し、左側の負のマージンとして設定します。

垂直方向の中央揃え

ボタンを垂直方向の中央に配置するには、相対位置を使用し、一番上のプロパティを次のように設定します。 50%。次に、ボタン自体に位置:相対を設定します:

button {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

コード例

div 内でボタンを中央に配置するための HTML および CSS コードの例を次に示します。

<div>
<pre class="brush:php;toolbar:false">#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

これにより、「Hello」ボタンが親内で水平方向と垂直方向の中央に配置されます。部門