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是100px margin-top是100px 那它整个盒模型的高度就应该是200px（这里就不算padding和border了） 而定位定的整个盒子 所以两个并不冲突

Answer 2

“为什么”可以同时作用，这个问题得问规范的制定者，我觉得就不用深究了。

这里 margin-top:-100px 的意思是，从当前定位的位置再向上移动 100px，如果整个 DOM 的高度是 200px 的话，就可以垂直居中了。

Answer 3

absolute定位与margin定位其实是没有什么冲突的，无论absolute元素时候设置了left/top值，其margin属性值都是可以起作用的。
下面展示的是没有left/top值的absolute元素的margin定位。
http://www.zhangxinxu.com/wor...

Answer 4

垂直居中分为两种情况，一是元素本身，二是元素内容。你所写的是前者，定位margin相对于其它元素的边界。你可以找张纸画一下。

Answer 5

一个盒模型，一个是定位