元素竖向的百分比设定是相对于容器的高度吗？

自己做了一下测试，结果。。。。。

<style>
    #box{width: 600px;height: 300px;background: black;position: relative;margin: 100px auto;}
    #div{width: 100px;height: 100px;background: red;position: absolute;left: 50%}
</style>

div套在box里面的，div的left值为50%，效果如图：

可以看到左边距居中，效果正常；

<style>
    #box{width: 600px;height: 300px;background: black;position: relative;margin: 100px auto;}
    #div{width: 100px;height: 100px;background: red;position: absolute;top: 50%}
</style>

现在改为top：50%，效果如图：

上边距居中，效果也正常；

那么我改成这样呢：

<style>
    #box{width: 600px;height: 300px;background: black;position: relative;margin: 100px auto;}
    #div{width: 100px;height: 100px;background: red;position: absolute;margin-top: 50%}
</style>

margin-top:50%,问题来了

很明显，这是把width当做了基准啊。

再看padding

<style>
    #box{width: 600px;height: 300px;background: black;position: relative;margin: 100px auto;}
    #div{width: 100px;height: 100px;background: red;position: absolute;padding-top: 50%}
</style>

结果：

一样是以width为基准的！

margin-left、margin-top就不用说了，肯定是以width为基准的。

但为什么这样设定就不清楚了，网上也没找到相应的说法，暂时先记住就好了。