CSS 居中给出不同的结果答案

【问题标题】：CSS centering gives different resultsCSS 居中给出不同的结果
【发布时间】：2011-01-04 19:49:26
【问题描述】：

考虑使用此代码将 div 相对于其父元素居中：

div {
width:200px;
position:absolute;
left:50%;
margin-left:-110px;
padding:10px;
display:table;
}

我们使用的是 (width/2) - padding，对吧？

为什么所有基于 Webkit 的浏览器（Safari 和 Chrome）都将这个 div 居中 10px 到左侧？这 10px 是内边距。

所以我们这里有两个方面：

Chrome + Safari -> 内边距不得包含才能正确居中
Firefox、IE、Opera -> 内边距必须不包含才能正确居中

现在我的问题是，两者中哪一个实际上做得对？

编辑：

显然;该问题仅在添加 display:table 时出现；到 div。举个例子：http://jsfiddle.net/rhKW7/1/link text

【问题讨论】：

标签： css webkit center

【解决方案1】：

我无法重现您的问题。您的代码可以跨浏览器运行。

现场演示： http://jsfiddle.net/SXzbF/1/

编辑： 我发现问题出在哪里：

在 Chrome 中（至少），如果你设置了display:table，那么结果是不会使用该元素的填充。我猜，那是因为，对于 TABLE 元素，填充仅设置为 TD 元素（到单元格），而不是 TABLE 元素。我不确定在 TABLE 上设置填充是否有效，但我建议您不要这样做，而是在单元格上设置填充。

【讨论】：

对不起。我想我已经把问题简化了很多。我稍后会更新代码。
发现问题：这个问题只在添加display:table时出现；到子元素。
@DADU 是的，桌子搞砸了。我已经知道了 :) 为什么你在 DIV 上使用 display:table 而不是直接使用 TABLE 元素？
@Šime Vidas - 这是一个非常好的问题。锚元素的每个子元素也都有下划线。现在我的子元素是一个跨度元素。我发现在 Webkit 中删除锚点内跨度上的下划线的唯一方法是将其显示属性设置为表格。
非常感谢！出色的答案解决了问题并澄清了事情。

【解决方案2】：

你做错了。你应该使用

margin: 0 auto;

这将使元素在其父元素中居中。

【讨论】：

Golez 但是 DIV 是绝对定位的。我认为这在这种情况下是行不通的。
这是一种很好的技术，但不适用于绝对定位的元素。
我认为定位是您尝试使元素居中的一部分。如果不是这种情况，很遗憾这不是一个有效的解决方案。但是为什么要居中一个绝对定位的元素呢？居中似乎意味着相对定位。

【解决方案3】：

根据您的实现，您可以包含需要在 100% 宽度和绝对定位的 div 中居中的元素，然后使用您拥有的当前元素使用 margin:0 auto 将其居中在绝对定位元素。

【讨论】：

这次恐怕不行了，因为不能添加任何额外的元素。