绝对定位偏离几个像素
Absolute positioning is a few pixels off
我在 div 中有一个图标，使用绝对定位垂直定位。 div 高 39px，图标高 10px：
我希望此图标在 div 内垂直居中。我的检查员（在 Chrome 上）说图标距离顶部 14.5 像素：
这意味着图标应该在 div 中完美地垂直居中。然而，它看起来不是那样的。所以我测量了它。 div 确实是 39px 高，图标是 10px 高，但是......我的眼球是正确的图像没有居中：图标上方的 space 是 16px，space 下面是13px:
为什么图标上方的 space 不是 14.5px，就像 Chrome 说的那样，就像我的代码说的那样？断开连接在哪里？
P.S。 - 由于四舍五入问题，我可以理解顶部 15px 间距和底部 14px 间距，但是 1.5px 的差异摆脱了那个理论。
P.P.S - 这是一个或多或少重现问题的示例：https://jsfiddle.net/0shzub2t/
P.P.P.S - 这是一个偏离我的代码的示例，以便于可视化：我认为它显示了问题，因为在示例中，我应该将图像的顶部边缘放在正确的位置div 的底部边缘，但图像比应有的高几个像素...
https://jsfiddle.net/0shzub2t/1/
您应该将 position: relative; 添加到 .container 元素，否则图像的绝对位置将不与其父 .container 相关，而是与下一个 "higher" 相关具有 position: relative 的元素，或者 - 如果没有这样的元素 - 到根元素，即 html。大多数浏览器中的 html 具有默认的 margin 设置，因此您的居中定位因边距设置而关闭。
但正如我所写：只需将 position: relative; 添加到 .container
我在 div 中有一个图标，使用绝对定位垂直定位。 div 高 39px，图标高 10px：
我希望此图标在 div 内垂直居中。我的检查员（在 Chrome 上）说图标距离顶部 14.5 像素：
这意味着图标应该在 div 中完美地垂直居中。然而，它看起来不是那样的。所以我测量了它。 div 确实是 39px 高，图标是 10px 高，但是......我的眼球是正确的图像没有居中：图标上方的 space 是 16px，space 下面是13px:
为什么图标上方的 space 不是 14.5px，就像 Chrome 说的那样，就像我的代码说的那样？断开连接在哪里？
P.S。 - 由于四舍五入问题，我可以理解顶部 15px 间距和底部 14px 间距，但是 1.5px 的差异摆脱了那个理论。
P.P.S - 这是一个或多或少重现问题的示例：https://jsfiddle.net/0shzub2t/
P.P.P.S - 这是一个偏离我的代码的示例，以便于可视化：我认为它显示了问题，因为在示例中，我应该将图像的顶部边缘放在正确的位置div 的底部边缘，但图像比应有的高几个像素... https://jsfiddle.net/0shzub2t/1/
您应该将 position: relative; 添加到 .container 元素，否则图像的绝对位置将不与其父 .container 相关，而是与下一个 "higher" 相关具有 position: relative 的元素，或者 - 如果没有这样的元素 - 到根元素，即 html。大多数浏览器中的 html 具有默认的 margin 设置，因此您的居中定位因边距设置而关闭。
但正如我所写：只需将 position: relative; 添加到 .container