样式居中问题？

Question

我知道当一个元素被设置绝对定位之后，margin是以当前位置做偏移，那下面这两种应该是一样的吧??

.box{
    transform: translate(-50%,-50%);
    position: absolute;
    top: 50%;
    left: 50%;
}

.box{
    margin-top:-50%;
    margin-left:-50%;
    position: absolute;
    top: 50%;
    left: 50%;
}

Answer 1

不一样，margin是按父级元素宽度计算的

Answer 2

https://jsfiddle.net/tsrug1yn/

margin/padding 如果使用百分比 都是根据父级元素width计算，而不是根据height计算。

Answer 3

margin的百分比值 都是按照父级元素的宽度来计算的 无论是top还是left

Answer 4

增加margin并没有偏移，而是因为box外边距变大了，看起来像是偏移了
margin的百分比是基于父元素的宽度计算的
第一种是可以的

Answer 5

margin不行，按照父级进行计算的

Answer 6

参考这篇文章吧：http://www.w3cplus.com/css/ve...

Answer 7

肯定不一样啊，在没有box-sizing限制的情况下，margin是会扩展容器盒模型的……怎么可能一样……

Answer 8

%可不行，这里要用具体数值，box的width和height（px）单位，%是按父级元素的长宽计算的