Using "Margin: 0 Auto;" in Internet Explorer 8

Using margin: 0 auto; in Internet Explorer 8

It is a bug in IE8.

Starting with your second question: “margin: 0 auto” centers a block, but only when width of the block is set to be less that width of parent. Usually, they get to be the same. That is why text in the example below is not centered.

<div style="height: 100px; width: 500px; background-color: Yellow;">    
    <b style="display: block; margin: 0 auto; ">text</b>
</div>

Once the display style of the b element is set to block, its width defaults to the parents width. CSS spec 10.3.3 Block-level, non-replaced elements in normal flow describes how: “If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.” The equality mentioned there is

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

So, normally all autos result in a block width being equal to the width of containing block.

However, this calculation should not be applied to INPUT, which is a replaced element. Replaced elements are covered by 10.3.4 Block-level, replaced elements in normal flow. Text there says: “The used value of 'width' is determined as for inline replaced elements.” The relevant part of 10.3.2 Inline, replaced elements is: “if 'width' has a computed value of 'auto', and the element has an intrinsic width, then that intrinsic width is the used value of 'width'”.

I guess that the scenario CSS cares about is IMG element. Stackoverflow logo in this example will be centered by all browsers.

<div style="height: 100px; width: 500px; background-color: Yellow;">    
    <img style="display: block; margin: 0 auto; " border="0" src="http://stackoverflow.com/content/img/so/logo.png" alt="Sample Image">
</div>

INPUT element should behave the same way.

What does auto do in margin: 0 auto?

When you have specified a width on the object that you have applied margin: 0 auto to, the object will sit centrally within it's parent container.

Specifying auto as the second parameter basically tells the browser to automatically determine the left and right margins itself, which it does by setting them equally. It guarantees that the left and right margins will be set to the same size. The first parameter 0 indicates that the top and bottom margins will both be set to 0.

margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;

Therefore, to give you an example, if the parent is 100px and the child is 50px, then the auto property will determine that there's 50px of free space to share between margin-left and margin-right:

var freeSpace = 100 - 50;
var equalShare = freeSpace / 2;

Which would give:

margin-left: 25;
margin-right: 25;

Have a look at this jsFiddle. You do not have to specify the parent width, only the width of the child object.

div does not get centered using margin: auto in IE9

Isolate the centering from the floating

This affects IE9/10.

It works fine if the floated element is removed, or if width is used instead of max-width. The presence of floated content, combined with the use of margin:auto and max-width instead of width, appears to be confusing IE9+.

To fix this, put the centered content in a wrapper div, so that the centering of the content can be separated from the floating of the sidebar. In other words, too much is happening layout-wise in a single div, more than IE9+ can handle. So split up the #content div into two separate divs.

#header {    height: 50px;    padding: 1em;    background: #224444;    color: #fff;}
#content-wrapper {    overflow: hidden;}#content {    max-width: 400px;    margin: auto;    padding: 1em;    background: #ddd;    height: 300px;}
#sidebar {    float: right;    width: 200px;    padding: 1em;    background: #aaa;    height: 300px;}

<div id="container">    <div id="header">        PAGE HEADER    </div>    <div id="sidebar">        Sidebar    </div>    <div id="content-wrapper">        <div id="content">            Centered Content        </div>    </div></div>

.wrapper {  border: 1px solid grey;  box-sizing: border-box;  display: flex;  flex-direction: column;  height: 300px;  padding: 5px;}.element {  border: 1px solid grey;  height: 35px;  margin: 5px;}.element:last-child {  margin-top: auto;}

<div class="wrapper">  <div class="element"></div>  <div class="element"></div>  <div class="element"></div>  <div class="element"></div></div>

 width: 300px;