为什么没有“margin：auto”？垂直居中元素？ [英] Why doesn't "margin: auto" center an element vertically?

问题描述

正如您在下面的演示中看到的那样， margin：auto; 将蓝色 div 水平居中，但不会垂直。为什么不呢？

  .box {border：1px solid red;宽度：100px; height：100px;}。center {background：blue;宽度：50px; height：50px; margin：auto;}  

 < div class =box > < div class =center>< / div>< / div>  

我的问题不是要求解决方法。

解决方案

href =http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height =nofollow noreferrer> CSS2.1的第10.6.2节，并且保持不变与 CSS2 保持一致。

正常情况下，块盒从上到下垂直堆叠。此外，垂直边缘可能会崩溃，并且只能在某些情况下（在您的演示中，父元素的边框将防止子元素上的任何边距与自身折叠）。如果你只有一个这样的块盒子，并且包含块的高度是自动的，那么无论如何它的顶部和底部边距将为零。但是，如果您在同一个流程中有多个块框，或者甚至是流出框影响流入框的布局（在 clearance ），那么您会如何为那些流入式箱子解决汽车余量问题？

这就是为什么汽车的左右边距同样为内联元素（包括原子内联）和浮点数（尽管水平边界从不崩溃）清零的原因。内联级别框包含沿线框放置，以及浮动太服从独特的布局规则。

绝对定位的盒子是一个不同的故事：因为他们从未意识到任何其他盒子与自己在同一个定位环境中，所以自动计算顶部和底部边距可以根据其包含的块计算它们而不必

Flexbox也是一个不同的故事：Flex的布局与块布局不同的地方在于，Flex项目的定义始终意识到其他Flex项目在同一个flex格式上下文中，包括没有的事实。特别是，既不可以漂浮入挠性容器，也不能浮动flex项目来颠覆这个（尽管你仍然可以完全使用绝对定位）。部分由于边界对柔性项目的影响非常不同。请参阅 4.2 ， 9.5 和 9.6 。

As you can see in the demo below, margin: auto; centers the blue div horizontally, but not vertically. Why not?

.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>

My question is not asking for workarounds.

解决方案

As mentioned, this behavior is specified in section 10.6.2 of CSS2.1, and has remained unchanged from CSS2.

Block boxes are stacked vertically from top to bottom in normal flow. Furthermore, vertical margins may collapse, and only do so under certain circumstances (in your demo, the border on the parent element will prevent any margins on the child element from collapsing with its own). If you only have one such block box, and the height of the containing block is auto, then its top and bottom margins will be zero anyway. But if you have more than one block box in the same flow, or even out-of-flow boxes affecting the layout of in-flow boxes (in the case of clearance for example), how would you expect auto margins to resolve for those in-flow boxes?

This is why auto left and right margins are likewise zeroed out for inline elements (including atomic inlines) and floats (though horizontal margins never collapse). Inline-level boxes are laid along line boxes, and floats too obey unique layout rules.

Absolutely positioned boxes are a different story: since they are never aware of any other boxes in the same positioning context as themselves, auto top and bottom margins can be calculated for them with respect to their containing blocks without having to worry about any other boxes ever interfering.

Flexbox is also a different story: what sets flex layout apart from block layout is that flex items are by definition always aware of other flex items in the same flex formatting context, including the fact that there are none. In particular, neither can floats intrude into the flex container, nor can you float flex items to subvert this (although you can still remove a child element from flex layout completely with absolute positioning). Margins behave very differently with flex items due in part to this. See sections 4.2, 9.5 and 9.6.

这篇关于为什么没有“margin：auto”？垂直居中元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！