在固定 div 内居中固定 div答案

【问题标题】：Centering fixed div inside a fixed div在固定 div 内居中固定 div
【发布时间】：2017-07-28 20:23:06
【问题描述】：

我正在努力将一个固定 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 的位置来实现我所需要的。但我需要它来固定位置。

【问题讨论】：

看看这个stackoverflow.com/questions/2691178/…
请问你为什么需要 .ques_prev_div 固定位置对我来说将它绝对定位在固定的父 div 中更有意义

标签： html css

【解决方案1】：

设置right:0;left:0为.ques_preview_div，用sn-p全屏查看

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

【讨论】：

【解决方案2】：

您可以将 CSS3 属性 transform: translate(-50%, -50%); 与 top 和 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>

【讨论】：

【解决方案3】：

在 ques_preview_div 类的宽度和高度上使用像素 (px) 而不是 em

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

【讨论】：