垂直定位元素的一个常见技巧是使用以下CSS：
.item {
position:absolute;
top:50%;
margin-top:-8px; /* half of height */
height: 16px;
}
当在Chrome中的指标视图中看到这是您看到的：
但是，当您将鼠标悬停在元素上方时，没有描绘视觉边缘，即边距在边框“外部”，并且可以可视化。但是负边距没有出现。他们如何看起来，它是什么，使它不同？
为什么margin-top：-8px不同于margin-bottom：8px？
那么，负利润如何工作，它们背后的直觉是什么。他们如何“碰撞”(如果margin-top <0)一个项目？
解决方法
负边距在css中有效，并且理解他们的(合规)行为主要基于
box model和边际崩溃。虽然某些情况更复杂，但在研究规范后可以避免许多常见的错误。
例如，您的示例代码的呈现由css规范指导，如calculating heights and margins for absolutely positioned non-replaced elements中所述。
如果我做一个图形表示，我可能会去这样的东西(不按比例)：
边框框顶部丢失了8px，但这不会影响内容&填充盒。因为你的元素是绝对定位的，将元素向上移动不会对布局造成任何进一步的干扰;而静态流内容并不总是这样。
奖金：
仍然需要说服阅读规范是要走的方式(而不是articles like this)？我看到你正在尝试垂直居中的元素，所以为什么你必须设置margin-top：-8px;而不是margin-top：-50％;?
嗯，在CSS中的垂直居中是harder than it should be.当设置均匀的顶部或底部边距在％，该值计算为a percentage always relative to the width of the containing block.这是一个常见的陷阱，很少在w3 docos之外描述的怪癖
