css - CSS 左边距，在 px 中有效，但在 % 中无效

Question

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

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

这个确实

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

我在 PHP 中工作，div“interieur”在回声中

Answer 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/

Answer 2

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

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