使 div 水平居中的问题

Question

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

问题是你没有告诉箭头 div 除了bottom:20px 之外的位置，所以它默认为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

Answer 2

问题是由于使用 margin:0 auto 与 display:inline 和 position: absolute。您可以通过将text-align:center 应用到header 轻松地将其居中，因为您的内部内容具有inline 布局。

Example

Answer 3

你可以使用

text-align:center;

在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);
text-align: center;
}

编辑：

这会水平对齐中心的 .down-arrow div，并使其与容器底部保持 20 像素的距离

   .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;
}