css - 绝对定位，百分比为 50%

Question

我从中找到了一个答案： 绝对定位与百分比给出了意想不到的结果

但答案并不完全正确显示在我的屏幕上

这是该答案中的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

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

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

Answer 2

使用以下样式。不需要绝对值和负值样式：

#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;
}

小提琴

Answer 3

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

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

如果这不能满足您的需求，请考虑使用text-align: centerandmargin: 0 auto作为选项。在您的 jsFiddle 中，最终目标是什么并不完全清楚。