如何将div元素中的按钮元素水平居中?

Question

我不想添加CSS到我的div元素(例如<div style="text-align: center;">)。

我只想给button元素添加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

在<button>上需要display: block; margin: auto;。jsFiddle

Answer 3

其他人已经提到了margin: 0 auto;方法，但是如果您想要一个解释，浏览器会在元素所在的容器中分割可用空间。

同样重要的是要指出的是，你可能也需要给你的元素一个宽度，以使其正常工作。

所以,整体:

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