如何在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

您需要display: block; margin: auto;在<button>. js小提琴

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
}