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

Question

我发现，在开发网站时，在随机高度的容器内垂直居中容器（固定高度）对于 Web 开发人员（至少是我）来说总是一场噩梦，而当涉及到水平居中容器（固定高度）时， width）在随机宽度的容器内，margin:0px auto; 往往在标准模型中提供一种简单的解决方法。

当事情可以如此简单时，为什么 CSS 在将固定高度的容器置于随机高度的容器内居中时不使用 margin:auto 0px; 来解决呢？这样做有什么具体原因吗？

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/

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

Answer 3

使用 flexboxparent

与 justify-content: center / align-items: center 相比，使用 margin: auto 的优点之一是能够滚动溢出父项的子项

html, body {
  height: 100%;
  margin: 0;
}

.parent {
  display: flex;
  width: 100%;
  height: 100%;
}

.inner {
  width: 100px;
  height: 100px;
  background-color: green;
  margin: auto;
}

<div class="parent">
  <div class="inner">
  </div>
</div>

Answer 4

CSS

.aligncenter{
      display: -webkit-box;
      display: -moz-box;
      display: box;
      -webkit-box-align: center;
      -moz-box-align: center;
      flex-align: center;
      -webkit-box-pack: center;
      -moz-box-pack: center;
      flex-pack: center;
}

HTML

<div class="aligncenter">
    ---your content appear at the middle of the parent div---
</div>

.aligncenter {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  -webkit-box-align: center;
  -moz-box-align: center;
  flex-align: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  flex-pack: center;
}

<div class="aligncenter">
  ---your content appear at the middle of the parent div---
</div>

注意

此 CSS 类适用于几乎所有浏览器