A better way to place a Div in the center with absolute position?

So here is what i was trying to do

i wanted to have a div with z-index -1 somewhere between 2 other divs to test the parallax effect on it i put everything on the center with margin : 0 auto . but when i changed the parallax div position to absolute, it moved to the left side of the page . next i tried moving it back to center with left :50% it didn't work so what i changed it to left :12.5% and it worked !

But here is my question : could i do it in any other way ?! and is what i did now right or is it gonna cause some problems in the future ?!

here are the codes :

Html :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Meaningless Pap</title>
    <link rel="stylesheet" href="style.css">

</head>

<body>
    <div class="container">
        <div class="content1">
            <h1>Welcome! </h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

        <div class="breaker" data-0="background-position:0px 0px;" data-700="background-position:0px -300px;">
            <h2> this is a text </h2>
        </div>

        <div class="content2">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

    </div>
    <script type="text/javascript" src="skrollr.min.js"></script>
    <script type="text/javascript">
        skrollr.init();
    </script>
</body>

</html>

Css :

body {
    font-family: 'lato';
    background: url("http://habrastorage.org/files/90a/010/3e8/90a0103e8ec749c4843ffdd8697b10e2.jpg") #000;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    font-size: 100%;
    line-height: 1.7;
    color: #000;
}

.container {
    width: 100%;
    margin: 0 auto;
}

.content1 {
    position: relative;
    background: #fff;
    width: 75%;
    margin: 0 auto;
    border-radius: 5px;
    border: 1px solid #000; 
    box-shadow: 0px 7px 15px #333;
    padding: 10px;
    z-index: 1;

}

.content2 {
    position: relative;
    background: #fff;
    width: 75%;
    margin: 0 auto;
    border-radius: 5px;
    border: 1px solid #000; 
    box-shadow: 0px -7px 15px #333;
    padding: 10px;
    z-index: 1;
    margin-top: 200px;
}


.breaker {
    position: absolute;
    left: 12.5%;
    width: 75%;
    height: 250px;
    background: url('bg.jpg');
    z-index: -1;
}

.breaker h2 {
    padding-top: 50px;
    text-align: center;
    color: #fff;
}

Solution

There is nothing wrong with your approach. The width percentage and the left percentage are calculated in the same way when absolutely positioned - relative to the first parent element that has a position other than static.

An alternative method for an absolutely positioned element would be to specify both left and right positions. This has the advantage of being unaffected by any borders or padding.

.breaker {
    position: absolute;
    left: 12.5%;
    right: 12.5%;
    height: 250px;
    background: url('bg.jpg');
    z-index: -1;
}