人们不喜欢center 标签，但对我来说它总是工作正是我想要的方式。尽管如此，center 已被弃用，所以我会努力。
现在我看到很多人建议使用神秘的 CSS margin: 0 auto;，但我什至无法让它工作（参见小提琴 here）。其他人会去修改position 或display，但这总是会破坏其他东西。
如何使用 css 将 span 居中，使其行为与 center 标记完全相同？
<div class="container">
<span class='btn btn-primary'>Click me!</span>
</div>
【问题讨论】：
Span 是内联元素，用于居中的margin: 0 auto 仅适用于宽度小于 100% 的非内联元素。
一种选择是在容器上设置对齐方式，尽管在这种情况下这可能不是您想要的：
div.container { text-align: center }
http://jsfiddle.net/MgcDU/1270/
另一个选项是更改span的显示属性：
/* needs some extra specificity here to avoid the display being overwritten */
span.btn.btn-primary {
display: table;
margin: 0 auto;
}
使用display: table 消除了对特定宽度进行硬编码的需要。它会根据其内容缩小或增长。
【讨论】：
display: table，WTF？
Table 只是一个选择不当的值名称，并没有像其他一些显示属性值（inline、block、inline-block 等）那样真正描述它的流动方式。
float: none; 删除任何floats。
<center>，它更容易、更快捷……是否已弃用。
您可以设置.container { text-align:center; }，以便div.container 中的所有内容都居中。
一般来说，有两种方法可以使事物居中。
text-align: center;。width: 50%;）。然后将左右边距设置为自动。您的margin: 0 auto; 示例说上边距和下边距应该为0（这对于居中无关紧要）广告左右边距应该是自动的——它们应该彼此相等。 <center> 元素实际上只是带有text-align:center; 的块级元素。如果你在上面发送border: solid red 1px;，你可以看到它是 100% 宽的，并且里面的所有东西都是居中的。如果将text-align 更改为左，则其子项不再居中。示例：http://jsfiddle.net/KatieK/MgcDU/1275/。也许你应该只考虑你的<div class="container"> 和text-align:center; } 等同于<center>。
【讨论】：
center吗？
span.btn 元素不是<span class='btn btn-primary'> 的兄弟；它是<center> 的兄弟姐妹。 <center> 元素充当div.container，上面设置了height: 100%; 和text-align:center;。
你将 span 块设置为水平，给它一个宽度以便 margin:auto 工作
看到这个fiddle
.center {
display:block;
margin:auto auto;
width:150px; //all rules upto here are important the rest are styling
border:1px solid black;
padding:5px;
text-align:center;
}
更新：为了不指定宽度并在跨度上具有元素的自然宽度，您必须在父级上使用 textalign
看到这个fiddle
.container{text-align:center}
.center {
border:1px solid black;
padding:5px;
}
【讨论】：
center 保留“自然宽度”。
width: 0px; 不会产生使块元素居中的效果。例如，请参阅jsfiddle.net/5c4ec。 DIV 变为 0 像素宽，但内容（按钮）从以 DIV 为中心的 0 像素宽的左侧延伸。 display: inline-block; 更接近“自然宽度”，但它不以 margin: 0 auto; 为中心。在这种情况下，最好的解决方案是将元素包装在一个应用了text-align: center; 的新元素中。 margin: 0 auto; 几乎专门用于您知道居中元素宽度的情况。
<span> 是一个内联元素。 <div> 是一个块元素。这就是它没有居中的原因。
<div class="container" style='float:left; width:100%; text-align:center;'>
<span class='btn btn-primary'>Click me!</span>
</div>
只有将 span 的内容转换为块时，才能将其居中，使用 'inline-block' 样式。
【讨论】：
display: inline-block; 属性的应用程序。
您的父元素需要有更大的宽度才能让子元素定位在其中。之后，margin: 0 auto; 的技巧是让父容器 position 和 display 的值相互兼容。
.container {
border: 2px dashed;
width: 100%;}
.btn {
display: block;
margin: 0 auto;
width: 25%;
}
【讨论】：
width: 25%?肯定不是。我不希望按钮在调整窗口大小时改变宽度！