为什么 margin: auto 只能水平工作而不垂直工作？

Question

我已经看到，在开发网站时，将容器（固定高度）垂直居中放置在随机高度的容器内对于 Web 开发人员（至少是我）来说总是噩梦，而当谈到水平居中容器（固定高度宽度）在随机宽度的容器内， margin:0px auto; 在标准模型中往往是一种简单的出路。

当事情可以这么简单时，为什么 CSS 不能与 margin:auto 0px; 一起工作，当涉及到将固定高度的容器居中放置在随机高度的容器中时？这样做有什么具体原因吗？

原文由 ikartik90 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

它真的没有你想象的那么可怕，只是不要使用边距。 vertical-align 确实是你应该依赖的流体高度垂直居中。我拼凑了一个快速演示来证明我的观点：

 * {
  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;
}

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

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

原文由 Wex 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

The right answer for your question is that margin: auto 0 doesn’t work the same way that margin: 0 auto works because width: auto doesn’t work the same way height: auto 确实如此。

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

 .parent {
    position: relative;
}

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

原文由 user1602599 发布，翻译遵循 CC BY-SA 3.0 许可协议