当一个元素有一个定位的父元素时，如何使绝对定位的元素相对于视口水平居中？

Question

例如，在此示例中，如何使蓝色子元素相对于视口水平居中（即在页面中心），前提是父元素必须保持不变。

其他要求：

1. 我不希望它被固定。
2. 假设父元素与左侧视口之间的距离未知。

.parent {
  margin-left: 100px;
  margin-top: 100px;
  background: red;
  position: relative;
  width: 50px;
  height: 50px;
}

.child {
  background: blue;
  position: absolute;
  bottom: 100%;
}

<div class="parent">
  <div class="child">
    child
  </div>
</div>

我试图将这个问题变成一个SSCCE（小而完整的例子，即提问者提供最小化代码能够重现问题的例子）。实际上，我的用例是有一个dropup（类似于下拉菜单，只是它会出现在触发按钮上方而不是下方）。我想要中心对齐的dropup菜单。

由于菜单需要绝对定位，否则它会妨碍其他DOM元素的流动，所以我需要定位容器，这样我就可以在菜单上设置bottom: 100%;，从而使其出现在触发按钮正上方。

- Adam Zerner

---

我不确定仅使用CSS是否可能实现这一点。如果您知道父元素的位置和父元素和子元素的宽度，那么可以使其工作。https://jsfiddle.net/2bnm7h5x/5/ -- 但我假设这是动态的，因此您需要JavaScript来获取这些值。 - sol

Answer 1

在这种情况下，您可以使用position:fixed，但为了避免它变为固定位置，请在body上应用一个空的transform：

body {
  transform:translate(0,0);
  min-height:150vh;
}

.parent {
  margin-left: 100px;
  margin-top: 100px;
  background: red;
  position: relative;
  width: 50px;
  height: 50px;
}

.child {
  background: blue;
  position: fixed;
  left:50%;
  transform:translate(-50%,-100%);
}

<div class="parent">
  <div class="child">
    child
  </div>
</div>

- Temani Afif

---

太棒了！谢谢！唯一的注意事项是，在我的实际情况中（与我在原始帖子中提供的示例不同），除非设置left和top（或bottom），否则子元素不会显示为position: fixed;。 - Adam Zerner

@AdamZerner 嗯，我不知道你的真实代码，但你可以像我所做的那样使用translate来避免使用top属性，或者也可以尝试调整margin-top。 - Temani Afif