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

Posted 2023-03-05

【中文标题】如何在 div 元素中水平居中按钮元素？

【英文标题】：How can I horizontally center a button element in a div element?

【发布时间】：2013-02-24 08:46:41

【问题描述】：

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

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

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

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

【问题讨论】：

相关：***.com/questions/15300234/…

【参考方案1】：

button 
    margin:0 auto;
    display:block;

button 
  margin: 0 auto;
  display: block;

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

【讨论】：

如果你在现实世界中使用它，你需要增加它的特异性，除非你想让按钮元素在任何地方居中。

我有个问题。块元素将使用其父元素的全宽。见jsfiddle.net/xmpDD/1。为什么按钮元素不使用 div 元素的全宽。我们得到的事实是按钮元素的宽度是 54 像素。我无法理解这一点。谢谢！

0 真的有必要吗？ margin: auto; 似乎适用于 FF、IE 和 Chrome。

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

【参考方案2】：

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

同样需要指出的是，您可能还需要为元素指定宽度，以使其正常工作。

所以，总的来说：

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

【参考方案3】：

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

【讨论】：

我有个问题。块元素将使用其父元素的全宽。见jsfiddle.net/xmpDD/1。为什么按钮元素不使用 div 元素的全宽。我们得到的事实是按钮元素的宽度是 54 像素。我无法理解这一点。谢谢！

@weilou 实际上，块级元素不一定获得其父级的宽度。它们的组合宽度、边距和填充等于其父级的宽度。希望对您有所帮助！

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

我不知道为什么这被否决了。它与接受的答案基本相同，只是它省略了0，据我所知，它是不需要的，并且同时有效地发布了。