如果我像这样设置div的CSS margin属性：
div { margin-left: auto; margin-right: auto; }
我得到一个在页面中水平居中的div like so。
但是，如果我将CSS更改为：
div { margin-top: auto; margin-bottom: auto; }
我的div不是垂直居中的。我不需要知道一种解决方法（plenty of solutions are available），但我想知道这种行为的原因。为什么margin-top和margin-bottom的工作方式不一样？我错过了什么？
答案 0 :(得分：19)
简短的回答是规范说的。
10.6.2内联替换元素，正常流中的块级替换元素，正常流中的“内联块”替换元素和浮动替换元素
如果'margin-top'或'margin-bottom'为'auto'，则其使用值为0.
http://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins
答案 1 :(得分：1)
假设我们正在谈论Flexbox中的自动边距。
margin-left和margin-right设置为auto将居中的原因是，默认情况下，宽度是块元素可用容器的100％。
另一方面，高度会尝试填充尽可能小的空间，因此margin-top和margin-bottom的{{1}}和auto将默认为0。但是，如果元素在一个具有固定高度的元素，那么margin-top和margin-bottom将能够基于该高度计算中心。