对我来说，tables 最有用的功能之一是它们的宽度可以根据内容进行调整。
您可以非常轻松地执行以下操作：
<table align=center style="border: 1px solid black">
<tr><td style="padding: 20px">
some text here
</table>
如果该框的内容更宽，则该框将更宽。非常直观，它适用于所有浏览器，期间。
您可以通过使用float CSS 属性为普通块元素实现类似的效果，即它们的宽度会根据其内容进行调整。但元素不会居中。
那么，问题来了：如何使块元素居中并让该元素以跨浏览器的方式调整其宽度以适应其内容？
【问题讨论】：
标签： html css cross-browser html-table
现代方法是指定display:table，IE 的解决方法是在inline/inline-block 上有一个父元素和 text-align:center：
<div id="for-ie">
<div id="el">whatup son</div>
</div>
<style>
#el {
display:table;
margin:0 auto;
}
/* for IE, throw this in a CC */
#for-ie { text-align:center; }
#el {
zoom:1;
display:inline;
}
</style>
这是我写的关于这个主题的快速教程：http://work.arounds.org/centering-block-level-element-variable-width/
我不困的时候会加长。
【讨论】：
table 为现代浏览器收缩包装元素。其他两个仅用于 IE。
</el> 的部分让我挑起了眉毛。
Eric Meyer引用CSS: The Definitive Guide
如果两个边距都设置为自动，如下面的代码所示，那么它们将设置为相等的长度，从而使元素在其父元素中居中：
p {width: 100px; margin-left: auto; margin-right: auto;}将两个边距设置为相等的长度是使元素居中的正确方法，而不是使用文本对齐。 （text-align 仅适用于块级元素的内联内容，因此将元素设置为具有 center 的 text-align 不应将其居中。）
实际上，只有 1999 年 2 月之后发布的浏览器才能正确处理自动边距居中，但并非所有浏览器都完全正确。那些不正确处理自动边距的行为方式不一致，但最安全的做法是假设过时的浏览器会将两个边距都重置为零。
然而，
IE/Win 到 IE6 中的一个更有害的错误是它实际上确实将 text-align: center 视为元素，并将元素和文本居中。这在 IE6 及更高版本的标准模式下不会发生，但在 IE5.x 及更早版本中仍然存在。
【讨论】：
text-align 使文本在块内居中，但不在 其 容器内使块居中。
如果您只想在页面中间显示一些文本，您可以使用如下内容：
<div style="text-align:center;">
<div style="background:red;display:inline;">
Hello World!
</div>
</div>
第一个块将内容对齐到中间。第二个将填充等于其内容的高度，因为display:inline 将强制<div/> 块的行为类似于<span/>，即。将其宽度调整为内容，而不是剩余空间。
请注意，这仅限于单行文本（例如“此处的某些文本”）。
【讨论】：
<div/> 无关。所以在我的例子中，“元素”是跨度，“内容”是跨度的innerHTML。
使用这个 CSS
＃内容 { 位置：绝对； 宽度：150px； 左边距：-75px； 左：50%； 边框：1px 实心#000； 文本对齐：居中； 填充：20px； }还有这个 html
【讨论】：
天哪，莫莉小姐！这些答案确实过于复杂了。
CSS：
div.centered {
width:100%;
margin:0 auto;
text-align:center;
}
div.centered span {
padding:20px;
border:1px solid #000;
}
然后在你的身体中使用它：
<div class="centered"><span>Hello world!</span></div>
【讨论】：
span 等内联元素的边框处理不当。
width:100% 不会导致块级别收缩。减去 IE 修复，我的解决方案非常简洁。