为什么自动保持边距的属性在水平工作时不能垂直工作？

Question

我已经看到,在开发网站,随机高度的容器内垂直居中(固定的高度)的容器总是作为Web开发人员的噩梦,而当涉及到水平中心位置的容器(的(至少我)固定宽度)随机宽度的容器内,margin:0px auto;往往在标准模型中提供一个简单的方法.

当事情可以如此简单时,为什么CSS不能解决margin:auto 0px;当将固定高度的容器集中在随机高度的容器内时？有没有具体的理由这样做？感谢您提前获得的见解.

Answer 1

这真的不是你想象的噩梦,只是不要使用边距.vertical-align是你应该依赖的流体高度垂直定心.我汇总了一个快速演示来证明我的观点:

HTML:

<span></span><div id="any-height"></div>

CSS:

* { margin: 0; padding: 0; }
html, body { 
    height: 100%;
    text-align: center; }
span { 
    height: 100%;
    vertical-align: middle;
    display: inline-block; }
#any-height { 
    background: #000;
    text-align: left;
    width: 200px;
    height: 200px;
    vertical-align: middle;
    display: inline-block; }

请参阅:http://jsfiddle.net/Wexcode/jLXMS/

Answer 2

你的问题的正确答案是,margin: auto 0工作方式不同,margin: 0 auto因为width: auto工作方式不同height: auto.

垂直自动边距适用于具有已知高度的绝对定位元素.

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 150px;
    height: 150px;
    margin: auto;
}