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

Question

我不想将 CSS 添加到我的 div 元素（例如

<div style="text-align: center;">

）。

我只想将 CSS 代码添加到按钮元素。

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

在这种情况下如何使按钮水平居中？

Answer 1

您可以将 margin-left/right 设置为 auto，当按钮显示为块时将应用该设置。

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

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

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

Answer 2

您需要

display: block; margin: auto;

上的

<button>

。 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
}