绝对定位，百分比为 50%答案

【问题标题】：absolute positioning with percentages 50%绝对定位，百分比为 50%
【发布时间】：2013-08-22 12:59:40
【问题描述】：

我从中找到了一个答案： 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% 不是父母宽度的一半，如果有人可以帮忙吗？

【问题讨论】：

50% 是父母宽度的一半。如果你看左边红色边框和字母T之间的空间，那是父母宽度的一半。
你希望它显示什么？
显示到父宽度的中心
@rink.attendant.6 是的！谢谢。我现在明白了。
查看我的答案，它以 TEST 为中心，不使用绝对定位和负值样式。

标签： css

【解决方案1】：

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

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

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

【讨论】：

感谢您的回答，-20px 来自哪里？
你的 item 元素是 41px 宽，所以其中一半是 ~20px。添加负左边距会将项目向左拉 20px，使其居中。

【解决方案2】：

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

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

【讨论】：

【解决方案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

【讨论】：

谢谢，但我有时需要绝对及其父级的图像