css - margin-top : auto and margin-bottom: auto amounting to 0 margin? 背后的基本原理是什么

Question

由于 margin-right: auto 和 margin-left: auto 水平居中元素，我希望它们的垂直对应物以相同的方式运行。

但我知道这不会发生，根据 CSS 规范:

10.6.2 Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements

If 'margin-top', or 'margin-bottom' are 'auto', their used value is 0.

也适用于 block 元素:

10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'

This section also applies to block-level non-replaced elements in normal flow when 'overflow' does not compute to 'visible' but has been propagated to the viewport.

If 'margin-top', or 'margin-bottom' are 'auto', their used value is 0.

现在我想知道的是这个决定/行为背后的基本原理。

我正在寻找的是理解和信念。我不认为一个模糊的解释可以做到这一点，但欢迎任何贡献。

Answer 1

如上所述:

Aha... That's not so obscure! I can see it being useful. Thanks for the example you gave on jsfiddle.

So, if an element is absolutely positioned in relation to the parent element, using both top and bottom, yet it's height is defined and is less then the height of the parent element minus the top and bottom offsets, then the margin property will be used to determine it's vertical alignment in relation to the parent, and margin:auto will result in a vertically centered element.

True, it sounds complicated, yet it's clear on jsfiddle.

例如，这个 CSS:

.inner { 
  position:absolute; 
  top:0; bottom: 20px; left:0; right:0px;
  padding:0; border:0;
  margin:auto;
  height:20px; width:50px;
}

和这个 HTML:

<div class=outer>    <div class=inner>Text</div></div>