在固定div内居中固定div

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在努力将固定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的。但我需要它有固定的位置。

回答：

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

回答：

您可以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>

回答：

使用像素（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>

以上是 在固定div内居中固定div 的全部内容， 来源链接： utcz.com/qa/262531.html

回到顶部