在固定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

回答

相關問題