为什么“margin：auto”不是垂直居中的元素？
正如你在下面的演示中看到的， margin: auto; 蓝色的水平居中，但不垂直。 为什么不？
.box { border: 1px solid red; width: 100px; height: 100px; } .center { background: blue; width: 50px; height: 50px; margin: auto; }
<div class="box"> <div class="center"></div> </div>
我的问题是不要求解决方法。
如前所述，这个行为在CSS2.1的第10.6.2节中有规定，并且与CSS2保持不变。
正常情况下，块盒从上到下垂直堆叠。 此外， 垂直边缘可能会崩溃 ，并且只在某些情况下这样做（在您的演示中，父元素的边框将防止子元素上的任何边距与自身折叠）。 如果只有一个这样的块盒子，并且包含块的高度是自动的，那么无论如何它的顶部和底部边距将是零。 但是，如果在同一个stream程中有多个块，或者甚至是stream出的箱子影响stream入箱的布局（例如在清除的情况下），那么如何解决这些问题stream入箱子？
这就是为什么汽车的左右边距同样为内联元素（包括primefaces内联）和浮点数（尽pipe水平边界从不折叠）清零的原因。 内联层框沿线框放置 ，浮动层也遵守独特的布局规则 。
绝对定位的盒子是一个不同的故事：因为他们从来不知道在与自己相同的定位上下文中的任何其他盒子， 可以针对它们的包含块计算自动顶部和底部边距，而不必担心任何其他盒子干扰。
Flexbox也是一个不同的故事：将Flex布局与块布局区分开来的原因在于，Flex项目在定义的时候始终注意其他Flex项目，包括没有的情况。 特别是既不能浮动到flex容器中，也不能浮动flex项来颠覆这个 （尽pipe你仍然可以通过绝对定位完全从flex布局中移除一个子元素）。 边际行为与弹性项目的行为有很大不同，部分原因在于此。 见第4.2,9.5和9.6节 。
为什么……因为W3C规范是这样说的。
如果“margin-top”或“margin-bottom”是“auto”，则使用的值为0。
至于实际的“为什么”…查询应该真的在那里解决。
它不是垂直居中元素，因为它是正常stream程中的块级元素。 因此， 以下规则适用 ：
如果
margin-top或margin-bottom是auto，则它们的使用值为0。
另外值得指出的是，上述规则也适用于以下要素（关于更多信息和条件，见第10.6.2和10.6.3点）。
- 内联replace元素
- 正常stream程中的块级replace元素
-
inline-blockreplace正常stream程中的元素 - 浮动replace的元素
- 当
overflow计算为visible时，正常stream程中的块级别非replace元素
说到这里，绝对定位，没有top ， height和bottom值auto非replace元素是这个规则的一个例外。 以下适用于第10.6.4点 ：
如果三个
top，height和bottom都不是auto并且如果margin-top和margin-bottom都是auto， 则在额外约束条件下求解方程式，即两个边界值相等 。
请参阅下面的示例，演示如何使用margin: auto垂直居中的元素进行垂直居中。 它的工作原理是三个属性top ， height和bottom都没有auto ：
.box { border: 1px solid red; width: 100px; height: 100px; position: relative; } .center { background: blue; width: 50px; height: 50px; margin: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
<div class="box"> <div class="center"></div> </div>
很多伟大的答案张贴在这里。 我会从另一个angular度来看这个。
为什么没有
margin:auto垂直工作？
实际上，它并不是每个display值。
如果display是flex ，则margin: auto按预期工作，垂直和水平均居中。
.box { border: 1px solid red; width: 100px; height: 100px; display: flex; /* new */ } .center { background: blue; width: 50px; height: 50px; margin: auto; }
<div class="box"> <div class="center"></div> </div>
这是因为知道要垂直居中的元素的真实高度的实际可能性。要了解这一点，首先要考虑自动水平居中是如何工作的。 你有一个div，你给它一个宽度（固定或百分比）。 宽度可以在一定程度上计算。 如果它是固定的宽度，很好。 如果它的灵活性或响应性（百分比），至less你有一个范围的宽度将覆盖之前，它击中下一个断点。 你取这个宽度，减去里面的任何东西，然后把剩下的部分分开。
现在，有了这些信息，浏览器如何计算你的div垂直增长的无限变化量呢？ 请记住，元素的大小，文本，填充和响应的包装也会改变宽度，并强制文本进一步包裹，并在其上，并在其上。
这是不可能的任务吗？ 不是真的，CSS花费了时间和精力来覆盖这个吗？ 不值得他们的时间，我猜。
这基本上是我告诉我的学生的答案。
但是，不要烦恼！ Bootstrap v4 alpha已经算出了垂直居中 ！
编辑
抱歉编辑这个晚，但我想你可能要考虑这个解决scheme垂直居中，这是非常简单的使用计算function
<div class="foo"></div> .foo { background-color: red; height: 6em; left: calc(50% - 3em); position: absolute; top: calc(50% - 3em); width: 6em; }
看到这里
