在溢出div中居中一个绝对div

Question

我希望将一个绝对位于溢出div中的div居中。

这是我的HTML。 Fiddle

 <header class="contain960"> 
      <div class="brand_logo"></div>
      <nav>
            <ul>
                <li class="active">Boats</li>
                <li>Cars</li>
                <li>Powersports</li>
                <li>RV's</li>
                <li>Consignment</li>
            </ul>
      </nav>
 </header>

 <div class="site_line top"></div>
 <div class="site_line custom"></div>
 <div class="site_line bottom"></div>

和CSS。

section {
  position: relative;
  max-width: 1280px;
  min-width: 960px;
  width: 100%;
  overflow: hidden;
}

.site_line {
  position: absolute;
  width: 1280px;
  height: 1px
  //Gradient Fill
  //Center the DIV;
}

.site_line.top{
  top: 0px;
}

.site_line.bottom{
  bottom: 0px;
}

.site_line元素应该始终保持在div的中心，即使该部分的宽度小于1280px而不是向左推。我之前用背景图像和background-position属性完成了这个。但不能为我的生活弄明白如何用javascript做到这一点。

任何帮助都会很棒！

Answer 1

不要使用position: absolute;！

而是使用margin: auto;：

.site_line {
  margin: auto;
  width: 1280px;
  height: 1px
  //Gradient Fill
}