absolute元素, top和margin-top为什么可以同时作用？

Question

在学习垂直居中时，一种实现是这样：
.center{
position:absolute;
height:200px;
top:50%;
margin-top:-100px;
}
我感觉有点别扭，因为有margin-top意味着top不是50%了,也不是margin-top把top覆盖了,只是在居中的位置向上移动着100px,为什么会有这样的效果呢？

Answer 1

margin也是盒模型中的一部分可能margin是负的有点抽象你可以这样想height是100pxmargin-top是100px那它整个盒模型的高度就应该是200px（这里就不算padding和border了）而定位定的整个盒子所以两个并不冲突