Is There Any Difference Between "Margin: 0 Auto;" and "Margin: Auto;"

Is there any difference between margin: 0 auto; and margin: auto;

Yes.

margin: 0 auto;

Sets the element's left and right margins to auto, and the top and bottom margins to 0.

margin: auto;

Sets all the margins to auto. You are probably getting the same behaviour due to your <body> being 100% height, hence the vertical auto margins have no effect.

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.

What, exactly, is needed for margin: 0 auto; to work?

Off the top of my head:

The element must be block-level, e.g. display: block or display: table
The element must not float
The element must not have a fixed or absolute position¹

Off the top of other people's heads:

The element must have a width that is not auto²

Note that all of these conditions must be true of the element being centered for it to work.

¹ _{There is one exception to this: if your fixed or absolutely positioned element has left: 0; right: 0, it will center with auto margins.}

² _{Technically, margin: 0 auto does work with an auto width, but the auto width takes precedence over the auto margins, and the auto margins are zeroed out as a result, making it seem as though they "don't work".}

Why doesn't margin:auto center an image?

Because your image is an inline-block element. You could change it to a block-level element like this:

<img src="queuedError.jpg" style="margin:auto; width:200px;display:block" />

and it will be centered.

What's the difference between margin:auto and justify-content / align-items center?

In your first example...

.outer {
  display: flex;
}
.inner {
  margin: auto;
}

... the auto margin applies only to the flex item and centers that one flex item within the container.

In your second example...

.outer {
  display: flex;
  justify-content: center;
  align-items: center;
}

You are centering items from the container level. This code will center all items.

Also, keep in mind, if you use both methods at the same time, margin: auto should prevail.

8.1. Aligning with auto
margins

Prior to alignment via justify-content and align-self, any
positive free space is distributed to auto margins in that dimension

If free space is distributed to auto margins, the alignment properties
will have no effect in that dimension because the margins will have
stolen all the free space left over after flexing.

But the most important difference, for practical purposes, may be the behavior when a flex item exceeds the size of the container. When this happens, you lose access to parts of the item when using the container-level code. The item disappears from the screen and is not accessible via scroll.

To overcome this problem, use margin: auto for centering to work properly.

Here's a more complete explanation:

Can't scroll to top of flex item that is overflowing container
Center a flex item vertically and horizontally (see Box #56)

IE Bugs:

Flex auto margin not working in IE10/11
Flexbox auto margins don't work with justify-content: center in IE

Text-align:center and margin:0 auto not working on absolute positioned elements

Without changing the HTML, the easiest approach to center the element horizontally would be to combine left: 50% and transform: translateX(-50%). This will essentially position the element 50% to the right and then displace half of the element's width by transforming it -50% to the left. In doing so, the element will be centered horizontally regardless of the width which means that you don't need to hardcode any values.

position: absolute;
left: 50%;
transform: translateX(-50%);

Updated Snippet:

#wrap {  border: 1px solid black;  position: relative;  width: 500px;  margin: 0 auto;  height: 80px;}#absolute {  border: 1px solid red;  position: absolute;  transform: translateX(-50%);  left: 50%;  bottom: 0;  cursor: pointer;}

<div id="wrap">  <div id="absolute">Click Me</div></div>

How to align a div to the middle (horizontally/width) of the page

<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>

How do I remove the top margin in a web page?

I had similar problem, got this resolved by the following CSS:

body {    
    margin: 0 !important;
    padding: 0 !important;
}

Cannot center align table even with margin 0 auto;

I will suggest to wrap both the tables into a main table and apply align='center' to table for center alignment.

Using floats with table is not a good practice.

Stack Snippet

.tg,td,th,table {  border-collapse: collapse;  border-spacing: 0;  padding:0;  table-layout:fixed;}
.tg td {  font-family: archer, sans-serif;  font-size: 14px;  padding: 10px 9px;  border-style: solid;  border-width: 1px;  overflow: hidden;  word-break: normal;}
.tg th {  font-family: archer, sans-serif;  font-size: 14px;  font-weight: normal;  padding: 10px 9px;  border-style: solid;  border-width: 1px;  overflow: hidden;  word-break: normal;}
.tg .tg-yw4l {  vertical-align: top;}
table.fixed2 {  width: 260px;}

/*Setting the table width is important!*/
.outerdiv {  display: block;  width: 50%;  margin: auto;}

<div class="inner_tables">  <table align="center">    <tbody>      <tr>        <td>          <table class="tg fixed2 animated" align="center">            <tr>              <th class="tg-yw4l " colspan="2 ">                <p class="bold white letterspacing ">THE RATE</p>              </th>            </tr>            <tr>              <td class="tg-yw4l "><img src="images/225.png " height="100px " width="100px "></td>              <td class="tg-yw4l ">Take advantage of our RRSP or Tax-Free 12 month non-redeemable term deposit</td>            </tr>          </table>        </td>        <td>          <table class="tg fixed2 animated" align="center">            <tr>              <th class="tg-yw41" colspan="2">                <p class="bold white letterspacing">THE DEADLINE</p>              </th>            </tr>            <tr>              <td class="tg-yw4l"><img src="images/date.png" height="100px" width="100px"></td>              <td class="tg-yw4l">The deadline for making an RRSP contribution for the 2017 tax year is March 1, 2018.</td>            </tr>          </table>        </td>      </tr>    </tbody>  </table></div>

Is There Any Difference Between "Margin: 0 Auto;" and "Margin: Auto;"