为什么自动边距只适用于水平方向，而不适用于垂直方向？

问题描述

我看到，在开发网站时，在任意高度的容器中垂直居中放置(固定高度的)容器对Web开发人员(至少是我来说)来说总是一场噩梦，而在水平居中放置随机宽度的容器(固定宽度)时，margin:0px auto;在标准模型中往往是一种简单的解决方案。

当事情可以这么简单时，当涉及到将固定高度的容器居中放置在任意高度的容器中时，margin:auto 0px;为什么不适用于margin:auto 0px;？这样做有什么特别的原因吗？

推荐答案

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

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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