Centering an absolute div within an overflow div

Question

I am looking to center a div that is absolutely positioned inside of an overflow div.

Here is my 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>

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

The .site_line element should always remain centered in the div even as the section gets smaller than 1280px wide and not be pushed to the left. I've done this before with background images and the background-position property. but can't for the life of me figure it out how to do it with out javascript.

Any help would be fantastic!

Answer 1

Don't use position: absolute;!

Instead use margin: auto;:

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