CSS 左边距，在 px 中有效，但在 % 中无效答案

【问题标题】：css margin left, works in px but not in %CSS 左边距，在 px 中有效，但在 % 中无效
【发布时间】：2013-01-22 07:01:54
【问题描述】：

任何人都知道为什么这段代码不起作用：

#interieur{
    display: inline-block;
    position: absolute;
    left:50%;
}

这个可以

#interieur{
    display: inline-block;
    position: absolute;
    left:500px;
}

我在 PHP 中工作，div“interieur”在 echo 中

【问题讨论】：

删除display: inline-block;。
什么不起作用？预期的行为是什么，观察到的行为是什么？
我希望 div 位于屏幕中间，但它位于最左侧，但是当我尝试 500px 而不是 50% 时，它正在工作。我也在尝试一个非 php 页面，它正在使用 50%
@Mooseman 没有它仍然无法工作:(
它适用于我，没有任何变化。请看这里的小提琴：jsfiddle.net/zZHRY（我添加了边框、宽度和高度以进行演示。）您确定没有其他样式与之冲突吗？

标签： css margin

【解决方案1】：

它不起作用，因为您忘记将 div 宽度的一半减去左侧位置（想想看，如果左侧是 50%，右侧也是 50%，那么您的 div 将是 0% 宽 :)

您可以使用 CSS3 Calc 来实现结果，在知道 div 的尺寸之前：

#interieur{
    display: inline-block;
    position: absolute;
    left:calc(50% - 100px); /* 100px is half of your div width */
    border: 1px solid #ccc;
    width: 200px;
    height: 200px;
}

演示：http://jsfiddle.net/zZHRY/3/

【讨论】：

谢谢，但我的 div 里面是一个会改变的图像，所以我确实减去了一半，但在 jquery 中
这是对原始问题的答案：“css margin left, works in px but not in %...有人知道为什么这段代码不起作用吗？”。现在你问的是不同的问题，那应该是一个不同的问题，恕我直言

【解决方案2】：

如果您可以指定 div 的宽度，请尝试以下操作：

width: 500px; /* insert width here */
margin: 0 auto;

【讨论】：