Zentrierung fest div in einem festen div

Question

Ich habe Schwierigkeiten, ein festes div in einem anderen festen div zu zentrieren. Ich habe viele Dinge ausprobiert, konnte sie aber nicht zentrieren. Wie kann ich das machen?

.overlay { 
 
    background: rgba(0, 0, 0, .60); 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 1; 
 
    -webkit-transition: opacity .25s ease; 
 
    z-index: 3; 
 
    margin: 0 auto; 
 

 

 
} 
 

 
.ques_preview_div { 
 

 
    width: 60em; 
 
    height: 30em; 
 
    top: 20%; 
 
    position: fixed; 
 
    background-color: #adadad; 
 
    margin: 0 auto; 
 
    z-index: 4; 
 
}

<div class="overlay"> 
 

 
<div class="ques_preview_div"> 
 

 
</div> 
 

 
</div>

konnte ich erreichen, was ich, indem sie die Position relativ benötigt ques_preview_div. Aber ich brauche es, um die Position zu fixieren.

Answer 1

gesetzt right:0;left:0 zu .ques_preview_div, mit dem Vollbild

.body { 
 
    margin:0; 
 
} 
 
.overlay { 
 
    background: rgba(0, 0, 0, .60); 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 1; 
 
    -webkit-transition: opacity .25s ease; 
 
    z-index: 3; 
 
    margin: 0 auto; 
 

 

 
} 
 

 
.ques_preview_div { 
 

 
    width: 60em; 
 
    height: 30em; 
 
    top: 20%; 
 
    position: fixed; 
 
    background-color: #adadad; 
 
    margin: 0 auto; 
 
    z-index: 4; 
 
    right:0; 
 
    left:0; 
 
}

<div class="overlay"> 
 

 
<div class="ques_preview_div"> 
 

 
</div> 
 

 
</div>

Answer 2

Schnipsel überprüfen Sie die CSS3-Eigenschaft verwenden transform: translate(-50%, -50%); zusammen mit top und left.

.overlay { 
 
    background: rgba(0, 0, 0, .60); 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 1; 
 
    -webkit-transition: opacity .25s ease; 
 
    z-index: 3; 
 
    margin: 0 auto; 
 
} 
 

 
.ques_preview_div { 
 
    width: 60em; 
 
    height: 30em; 
 
    position: fixed; 
 
    background-color: #adadad; 
 
    margin: 0; 
 
    z-index: 4; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<div class="overlay"> 
 
    <div class="ques_preview_div"> 
 
    </div> 
 
</div>

Answer 3

Verwenden Pixel (px) statt em auf Breite und Höhe der Klasse ques_preview_div

.overlay { 
 
    background: rgba(0, 0, 0, .60); 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 1; 
 
    -webkit-transition: opacity .25s ease; 
 
    z-index: 3; 
 
    margin: 0 auto; 
 

 

 
} 
 

 
.ques_preview_div { 
 

 
    width: 60px; 
 
    height: 30px; 
 
    top: 20%; 
 
    position: fixed; 
 
    background-color: #adadad; 
 
    margin: 0 auto; 
 
    z-index: 4; 
 
}

<div class="overlay"> 
 

 
<div class="ques_preview_div"> 
 

 
</div> 
 

 
</div>