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

Question

我不想给我的div元素添加CSS（例如，<div style="text-align: center;">）。

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

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

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

- weilou

---

相关链接：https://dev59.com/s2Up5IYBdhLWcg3wZG8c - TylerH

Answer 1

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

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

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

- j08691

---

如果你在实际应用中使用这个，除非你想让按钮元素在任何地方都居中，否则你需要增加其特定性。 - Josh Burgess

我有一个问题。块级元素将使用其父元素的全部宽度。请参见http://jsfiddle.net/xmpDD/1。为什么按钮元素不使用div元素的全部宽度。我们得到的真相是按钮元素的宽度为54像素。我无法理解这一点。谢谢！ - weilou

0 是必须的吗？在 Firefox、IE 和 Chrome 中似乎 margin: auto; 就可以工作。 - Adi Inbar

@AdiInbar - 0 只是顶部和底部的边距。这里假设只有水平居中。你可以将其设置为自动，然后它会根据容器的高度垂直居中。 - tjmoore

Answer 2

您需要在 <button> 上使用 display: block; margin: auto;。

jsFiddle

- dezman

---

我有一个问题。块级元素将使用其父元素的全部宽度。请参见http://jsfiddle.net/xmpDD/1。为什么按钮元素不使用div元素的全部宽度。我们得到的真相是按钮元素的宽度为54像素。我无法理解这一点。谢谢！ - weilou

@weilou 实际上，块级元素不一定会获得其父元素的宽度。它们的总宽度、边距和内边距等于其父元素的宽度。希望对你有所帮助！ - Phillip Schmidt

非常感谢你，菲利普。你的评论对我很有帮助！ - weilou

我不确定为什么这个被踩了。它本质上与被接受的答案相同，只是省略了一个我认为不需要的 0，而且发布时间几乎相同。 - Adi Inbar

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
}

- Phillip Schmidt