在固定div内居中固定div

我正在努力将固定div居中在另一个固定div内。我尝试了很多东西，但无法集中它。我怎样才能做到这一点？在固定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的。但我需要它有固定的位置。

来源

2017-03-08 CraZyDroiD

看看这一个HTTP的高度：//计算器.com/questions/2691178/how-to-make-a-div-center-align-in-html – xird

请问为什么你需要.q ues_prev_div是固定的位置，它对我来说更有意义，将其绝对地定位在固定的父分区 –

设置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>

来源

2017-03-08 10:14:50

谢谢。这是正确的答案 – CraZyDroiD

您可以top和left一起使用CSS3属性transform: translate(-50%, -50%);检查。您宽度

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

来源

2017-03-08 10:19:44 Pugazh

使用像素（PX），而不是EM和类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>

来源

2017-03-08 10:21:49

在固定div内居中固定div

回答

相关问题