html - ボタン要素をdiv要素の水平方向の中央に配置するにはどうすればよいですか？

Question

div要素にCSSを追加したくありません（例<div style="text-align: center;">）。

ボタン要素にCSSコードを追加したいだけです。

<div>
  <button>Button</button>
</div>

この場合、ボタンを水平方向の中央に配置するにはどうすればよいですか？

Answer 1

button {
    margin:0 auto;
    display:block;
}

button {
  margin: 0 auto;
  display: block;
}

<div>
  <button>Button</button>
</div>

Answer 2

他の人はすでにそのmargin: 0 auto;方法について言及していますが、説明が必要な場合は、ブラウザーは、要素が入っているコンテナーに使用可能なスペースを分割します。

また、これが正しく機能するためには、おそらく要素にも幅を与える必要があることを指摘することが重要です。

したがって、全体として：

button {
    display:inline-block; //Typically a button wouldn't need its own line        
    margin:0 auto;
    width: 200px; //or whatever
}

Answer 3

あなたはに必要display: block; margin: auto;です<button>。 jsFiddle