html - 问题使 div 水平居中

Question

我试图将我的 div .down-arrow 水平居中但没有成功。 DIV 是绝对定位的，但 margin:0px auto；似乎没有用。问题是什么？谢谢 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

问题是除了 bottom:20px 之外，您还没有告诉箭头 div 在哪里，所以它默认为 left:0;

JSfiddle Demo

你需要将它添加到你的箭头 CSS 中

left:50%; /*push the div halfway over*/
-webkit-transform:translateX(-50%); /* bring it back by half its own width */
transform:translateX(-50%);

您可能想引用这篇有很多相同问题的帖子。我将详细介绍此解决方案。

Reference Question