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

Question

EG。如果父母必须保持不变，如何让这个例子中的蓝色孩子相对于viewport（即在页面中心）水平居中。

其他资格：

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%;，使其显示在触发按钮的正上方。

Answer 1

在这种情况下，你可以使用position:fixed但是要避免它被修复，应用空变换到正文：

＆＃13;

＆＃13;

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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;