绝对定位，百分比50％

Question

我发现了一个问题： Absolute positioning with percentages giving unexpected results

但答案在我的屏幕上显示不太正确

此答案中的 jsFiddle 。

#container {
    border: 1px solid red;
    height: 100px;
    width: 100px;
    overflow: hidden;
    position: relative;
}

#item {
    border: 1px dashed purple;
    position: absolute;
    left: 50%;
}

我遇到这个问题，如果有人可以提供帮助，50％不是父母宽度的一半？

Answer 1

正确地将元素定位在50％ - item元素的左上角就在这一点上。如果你想完全居中，你需要添加item宽度的一半的负左边距：

#item {
    border: 1px dashed purple;
    position: absolute;
    left: 50%;
    margin-left: -20px;
}

如果这不符合您的需求，请考虑使用text-align: center和margin: 0 auto作为选项。在你的jsFiddle中，目前还不清楚最终目标是什么。

Answer 2

就x和y像素位置而言，项目div位于容器div宽度的50％（即距离100px容器左侧50px）。

如果增加容器的宽度，您将相应地看到项目div位置。

Answer 3

使用以下样式。不需要绝对和负面的风格：

#container {
    border: 1px solid red;
    height: 100px;
    width: 100px;
    overflow: hidden;
    text-align: center;
}

#item {
    border: 1px dashed purple;
    display: inline-block;
    margin: 0 auto;
}

Fiddle