如何让绝对定位的 div 与固定 div 水平居中？答案

【问题标题】：How do I get an absolute positioned div to sit centred horizontally with a fixed div?如何让绝对定位的 div 与固定 div 水平居中？
【发布时间】：2020-03-27 13:14:49
【问题描述】：

我试图让一个 div(main) 与另一个 div(centre) 居中，div(main) 需要是静态的，因为我不希望它滚动但 div(centre) 必须是绝对，因此它可以位于具有 onclick 功能的单独 div 上。

当前的 HTML 和 css：

 <div className='meal_popup'>
                    <div className='meal_popupElement'>
                        <p>testing1</p>
                    </div>
                    <div onClick={this.mealOne_boxClickHandler} className='meal_popupBackground' />
                </div>

.meal_popup {
  position: fixed;
  display: flex;
  align-items: center;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 30;
}


.meal_popupElement {
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  border-radius: 15px;
  height: 35rem;
  margin-left: 1rem;
  margin-right: 1rem;
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    z-index: 2;

}

.meal_popupBackground {
  position: relative;
  background: rgba(00, 00, 00, 0.6);
  width: 100%;
  height: 100%;
  z-index: 1;
}

结果：

目标：（这在视觉上看起来是我想要的，但问题是整个 div 是可点击的，并且只希望在背景 HTML 和 css 上使用该功能:)

<div onClick={this.mealTwo_boxClickHandler} className='meal_background'>
                    <div>
                        <p>testing2</p>
                    </div>
                </div>


 .meal_background {
      position: fixed;
      display: flex;
      align-items: center;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(00, 00, 00, 0.6);
      z-index: 30;
    }

    .meal_background div {
      background: white;
      border-radius: 15px;
      height: 35rem;
      width: 100%;
      margin-left: 1rem;
      margin-right: 1rem;
      box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
        0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    }

【问题讨论】：

您可以添加相对于 div 的位置而不是绝对位置。然后你可以添加 text-align: center 如果它不是一个 flex 项目并且只是一个 inline-block 或者在 flex 上使用 justify-content: center;在父级上。
抱歉，它不起作用，这是您推荐的 css 的结果 imgur.com/U8kkVa0 我认为我需要绝对的 div 重叠，因为它们不在同一个 div 中，谢谢
@RitanshuSingh 可能是我错过了解释你的代码，也许把它写出来，我看看它是否有效？
我不明白你的项目，但这个技巧适用于每个元素。您可以保持代码不变，但将以下代码添加到要居中的元素中。左：50%；和变换：translateX(-50%);

标签： html css reactjs sass

【解决方案1】：

要使位置属性不同于静态的任何元素居中，您可以使用以下代码。但是，请注意，以下代码比其他方法占用的 CPU 时间稍多；

水平居中

left:50%;
transform: translateX(-50%);

垂直居中

top: 50%;
transform: translateY(-50%);

特别是对于这个答案，在具有固定定位的容器上应用right: 0px;，并将代码应用到要居中的元素上水平居中。

【讨论】：

您好，再次感谢您的帮助，但您可以看到您的建议仍然无效imgur.com/Za124gj
我有你的问题，把代码正确：0；到您已应用固定定位的元素。还要将上面的代码（答案中的代码）与您想要居中的元素一起保留。
设法修复它不是我想要的，但它的工作原理谢谢！
我必须预先定义宽度，我宁愿将宽度设置为 100%，并添加 1 rem 的左右边距或更好的缩放比例和纵横比的微小变化

【解决方案2】：

所以问题似乎是在边缘设置左边距值或右边距值，以便像往常一样在两边创建一个空间。所以不是宽度 100% 和 1rem 左/右边距（id 使用 as 非常适合缩放。我设置了预设宽度并实现了上面由@RitanshuSingh 提供的代码。所以我的代码如下所示：

.meal_popup {
  position: fixed;
  display: flex;
  align-items: center;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 30;
}

.meal_popupElement {
  position: absolute;
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border-radius: 15px;
  height: 35rem;
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  z-index: 2;
}

.meal_popupBackground {
  position: relative;
  background: rgba(00, 00, 00, 0.6);
  width: 100%;
  height: 100%;
  z-index: 1;
}

最好选择一个边距，但如果你知道如何让它工作，请发布修复。

结果：

【讨论】：