Differencebetween Using 'Text-Align:Center' and 'Margin: 0 Auto' to Center an Element in CSS

What is the difference between using `text-align:center` and `margin: 0 auto` to center an element in CSS?

First, there is no "align: center". What you're thinking of is "text-align: center", and that detail — the prefix "text-" — is a hint as to what the problem is. The "text-align" property is for inline elements being laid out in blocks. When you're trying to center a block-level element in some content, an inline layout style does not make sense.

The (now deprecated) align attribute on elements is not a CSS thing; it's a throwback to the days of yesteryear.

Now, as to vertical alignment, sadly the answer is "no," at least in practical terms. The trick with "margin: auto" won't work. Vertical alignment with nothing but CSS is challenging, to put it mildly. There are many different situations and techniques to use. Here's an interesting (if a little old) page on the subject: http://www.student.oulu.fi/~laurirai/www/css/middle/

edit from the future — Anybody trying to do vertical centering should be keeping an eye on the availability of flexbox layout.

different between text-align:center and margin auto?

Well

That’s depends on what every property of them work.

For the margin: it’s give the specified value for the edges of the element.

For example:

margin: 5px;

Will give the element an edge of 5px each side.
So for example when you use
margin:0 auto;

It gives the element 0px edge from the top and the bottom. And give it auto equal edges from left and right. So it will move to the center.

For text-align: center;

This is most used with a text as its name. you can align the text left,right or center using it.

When do I Use Center and Auto Margin? CSS

<center> is an depreciated tag. You should avoid using it. This tag is not supported in HTML5. CSS property is used to set the align of the element instead of the center tag in HTML5. An equivalent tag to <center> can be considered to be -

.center { margin: 0 auto; text-align: center; }

The main reason why <center> was depreciated was because it defines the presentation of its contents and not the contents itself. According to w3.org -

The CENTER element is exactly equivalent to specifying the DIV element
with the align attribute set to "center". The CENTER element is
deprecated.

So is there any differences and when do I use each one or does it not matter?

The above code snippet and <center> can be considered equivalent. Just using margin: 0 auto; can't always be considered the same though. See the below example -

<!DOCTYPE html>
<html>

<body>

  <center>
    <div>This is a div inside center</div>
  </center>
  <br>

  <div>This is a div without any styling.</div>
  <br>

  <div style="margin: 0 auto;">This is a div with "margin: auto 0px;".Text not centered, doesn't work.</div>
  <br>

  <div style="margin: 0 auto;text-align:center">This is a div with "margin: auto 0px;".Text centered, works !</div>

</body>

</html>

Centering with margin: 0 auto; vs. justify-content and flexbox

If you use div or p it's better to use margin: 0px auto; for containers or main page,
But if you need two or more children to be centered, it's better to set parent to text-align:center and the children to display: inline-block.

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

Why margin:0 auto is not aligning to center

In short: It depends on the position, width and display attributes of elements.
Try putting position: relative; to them and also set their width.

Child divs always have a 100% width which makes centering useless, so defining width and position makes use of it. Also, you can't use display: inline-block, but display: block.

EDIT

Here is the code sample of your div using margin: auto: http://jsfiddle.net/vnAvk/

And here is with the inside elements also centerer (I think that's what you're after): http://jsfiddle.net/vnAvk/1/

And here's with the whole thing centered: http://jsfiddle.net/vnAvk/2/

Why is margin: 0 auto centering text on image without width specified?

Margin:0 auto works because of the default font-size
I would recommend that you make the hero-text have a width of 100%. While using text-align:center; as that will always center the text.
My Final Code

.hero-text {
    margin:0px;
    width:100%;
    text-align:center
}

Why can't I center with margin: 0 auto?

You need to define the width of the element you are centering, not the parent element.

#header ul {
    margin: 0 auto;
    width: 90%;
}

Edit: Ok, I've seen the testpage now, and here is how I think you want it:

#header ul {
    list-style:none;
    margin:0 auto;
    width:90%;
}

/* Remove the float: left; property, it interferes with display: inline and 
 * causes problems. (float: left; makes the element implicitly a block-level
 * element. It is still good to use display: inline on it to overcome a bug
 * in IE6 and below that doubles horizontal margins for floated elements)
 * The styles below is the full style for the list-items. 
 */
#header ul li {
    color:#CCCCCC;
    display:inline;
    font-size:20px;
    padding-right:20px;
}