如何在div元素中水平居中按钮元素？

Question

我不想将CSS添加到我的div元素（例如<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