html - 在固定 div 内居中固定 div

Question

我正在努力将一个固定的 div 置于另一个固定的 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: 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>

我可以通过给出相对于 ques_preview_div 的位置来实现我需要的。但我需要它固定位置。

Answer 1

将right:0; left:0设置为.ques_preview_div，全屏查看代码片段

.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>