1. ホーム
  2. ハイパーリンク

[解決済み】div内のボタンを中央に配置する方法は?

2022-04-17 16:53:40

質問

幅が100%のdivがあります。

ボタンを中央に配置したいのですが、どうすればよいでしょうか?

<div style="width:100%; height:100%; border: 1px solid">
  <button type="button">hello</button>
</div>

解決方法は?

回答を更新しました

アクティブな回答であることに気づいたので更新しますが、現在ではFlexboxが正しいアプローチでしょう。

ライブデモ

縦・横の整列。

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

水平方向のみ(主なフレックス軸が水平である限り、デフォルト)。

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

フレックスボックスなしの固定幅を使用したオリジナルアンサー

もし元の投稿者が垂直方向と中央揃えにしたいのであれば、ボタンの幅と高さを固定にするのはとても簡単です。

ライブデモ

CSS

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

を使用すると、水平方向のアライメントを調整することができます。

button{
    margin: 0 auto;
}

または

div{
    text-align:center;
}