问题是水平居中div

Question

我试图将我的div。向下箭头水平居中，但没有成功。 DIV是绝对定位但边距：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

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

Example

Answer 2

您可以使用

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

Answer 3

问题是你没有告诉箭头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