CSS-центр a div над верхним оверлеем

Question

Я создал наложение с div над его вершиной, прямо сейчас, я пытаюсь центрировать div поверх верхушки наложения, я пробовал перемещаться по левому и правому, но ничего не работало ,

.request-estimate { 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 100%; 
     height: 100%; 
     z-index: 99999; 
     background-color: rgba(0,0,0,0.8); 
     display: none; 
} 

.request-estimate-box { 
     display: none; 
     height: 400px; 
     width: 40%; 
     margin: 0 auto; 
     background-color: #FFF; 
     z-index: 99999; 
     position: fixed; 
     top: 15%; 
     padding: 20px; 
     border-radius: 5px; 
} 

А вот CSS

<div class="request-estimate"></div> 
       <div class="request-estimate-box"> 
         <h1>Request Free Estimate</h1> 
         <form action="" method="post"> 
           <p> 
             <label for="name">Name</label> 
             <input type="text" name="name" id="name" class="form-control" /> 
           </p> 
           <p> 
             <label for="email">Email</label> 
             <input type="email" name="email" id="email" class="form-control" /> 
           </p> 
           <p> 
             <label for="phone">Phone</label> 
             <input type="phone" name="phone" id="phone" class="form-control" /> 
           </p> 
           <p> 
             <input type="submit" name="submit" id="submit" value="Submit" class="btn btn-default" /> 
           </p> 
         </form> 
       </div> 

Answer 1

.request-estimate { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 99999; 
 
    background-color: rgba(0,0,0,0.8); 
 
    /*display: none;*/ 
 
} 
 

 
.request-estimate-box { 
 
    /*display: none;*/ 
 
    height: 400px; 
 
    width: 40%; 
 
    margin-left:-20%; /*add this = width/2*/ 
 
    background-color: #FFF; 
 
    z-index: 99999; 
 
    position: fixed; 
 
    top: 15%; 
 
    left:50%; /*add this*/ 
 
    padding: 20px; 
 
    border-radius: 5px; 
 
}

<div class="request-estimate"></div> 
 
<div class="request-estimate-box"> 
 
    <h1>Request Free Estimate</h1> 
 
    <form action="" method="post"> 
 
    <p> 
 
     <label for="name">Name</label> 
 
     <input type="text" name="name" id="name" class="form-control" /> 
 
    </p> 
 
    <p> 
 
     <label for="email">Email</label> 
 
     <input type="email" name="email" id="email" class="form-control" /> 
 
    </p> 
 
    <p> 
 
     <label for="phone">Phone</label> 
 
     <input type="phone" name="phone" id="phone" class="form-control" /> 
 
    </p> 
 
    <p> 
 
     <input type="submit" name="submit" id="submit" value="Submit" class="btn btn-default" /> 
 
    </p> 
 
    </form> 
 
</div>

Answer 2

Решение: https://jsfiddle.net/gqqqeLfL/

request-estimate-box не сдерживали от request-estimate.

Первоначально:

<div class="request-estimate"></div> 
    <div class="request-estimate-box"></div> 

Изменен:

<div class="request-estimate"> 
    <div class="request-estimate-box"></div> 
</div> 

Кроме того, удалены position:fixed так, что приклеивает элемент, таким образом, точное положение nullifing ваш margin-auto. Теперь позиция по умолчанию - position:relative, а margin:auto - правильно выполнен.

Answer 3

Я вижу два варианта:

.request-estimate-box { 
height: 400px; 
width: 40%; 
background-color: #FFF; 
z-index: 99999; 
position: fixed; 
top: 15%; 
left: 0; 
right: 0; 
margin: auto; 
padding: 20px; 
border-radius: 5px; 
} 

http://codepen.io/anon/pen/dPLxPJ?editors=110

А:

.request-estimate-box { 
height: 400px; 
width: 40%; 
background-color: #FFF; 
z-index: 99999; 
position: fixed; 
top: 15%; 
left: 50%; 
-webkit-transform: translateX(-50%); 
transform: translateX(-50%); 
padding: 20px; 
border-radius: 5px; 
} 

http://codepen.io/anon/pen/ByEXyM?editors=110

И запасная половина его ширины от центра, конечно, как предлагает Тамбо.