Issue to center a div horizontally

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