Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why doesn't "margin: auto" center an element vertically?

Tags:

html

css

margin

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.

like image 444
Stickers Avatar asked Dec 31 '15 22:12

Stickers


People also ask

Why does margin auto not work vertically?

The right answer for your question is that margin: auto 0 doesn't work the same way that margin: 0 auto works because width: auto doesn't work the same way height: auto does. Vertical auto margin works for absolutely positioned elements with a known height.

How do you set the center of an element vertically?

For example, if you're trying to align something horizontally OR vertically, it's not that difficult. You can just set text-align to center for an inline element, and margin: 0 auto would do it for a block-level element.

How do you center a div with margin auto?

To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container.


1 Answers

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.

like image 157
BoltClock Avatar answered Sep 20 '22 13:09

BoltClock