Issue to center a div horizontally - html

Question

I'm trying to center my div .down-arrow horizontally but without success. The DIV is absolute positioned but margin:0px auto; does not seem to be working. What is the issue? thanks
http://jsfiddle.net/7UNrP/
HTML:
<header>
<div class="down-arrow">arrow</div>
</header>
CSS:
header {
position: relative;
width: 100%;
height: 600px;
min-height: 300px;
margin-right: auto;
margin-left: auto;
background-image: url('http://lorempixel.com/output/nature-q-c-1020-711-1.jpg');
background-size: cover;
background-position: center center;
background-color: rgb(222, 222, 222);
}
.down-arrow {
position: absolute;
margin:0px auto;
bottom: 20px;
display: inline;
padding: 10px;
color: #FFF;
border: 0;
font-weight: 400;
font-size: 12px;
background: red;
-webkit-animation: icon 1.2s infinite;
}
#-webkit-keyframes icon {
from {
opacity: 1;
bottom: 20px;
}
to {
opacity: 0;
bottom: 10px;
}
}

Answer 1

The problem is that you haven't told the arrow div where to be except bottom:20px so it defaults to left:0;
JSfiddle Demo
You need to add this to your arrow CSS
left:50%; /*push the div halfway over*/
-webkit-transform:translateX(-50%); /* bring it back by half its own width */
transform:translateX(-50%);
You might want to refer to this post which had much the same issue. I go into further detail regarding this solution.
Reference Question

Answer 2

The issue is due to using margin:0 auto with the display:inline and position: absolute. You can easily center it by applying text-align:center to the header as your inner content has an inline layout.
Example

Answer 3

You could use
text-align:center;
in header css like this
header {
position: relative;
width: 100%;
height: 600px;
min-height: 300px;
margin-right: auto;
margin-left: auto;
background-image: url('http://lorempixel.com/output/nature-q-c-1020-711-1.jpg');
background-size: cover;
background-position: center center;
background-color: rgb(222, 222, 222);
text-align: center;
}
EDIT:
This aligns the .down-arrow div in the center horizontally and keep it 20 pixel away from the bottom side of the its container
.down-arrow {
position: absolute;
margin-left: 50%;
/* bottom: 20px; */
/* display: inline; */
padding: 10px;
color: #FFF;
border: 0;
font-weight: 400;
font-size: 12px;
background: red;
-webkit-animation: icon 1.2s infinite;
}