在具有动态宽度的相对父级内居中绝对 div [重复]

Question

我需要在相对容器（蓝色）内居中（从左到右）绝对元素（绿色）。子元素（绿色）需要具有动态/未设置的宽度。我宁愿不使用 JavaScript（仅限 CSS 和 html）。

代码：

.relativeParent {
  width: 100px;
  height: 100px;
  background: blue;
  position: relative;
  overflow: visible;
  display: block;
  margin-left: 100px;
  margin-bottom: 20px;
}

.absoluteChild {
  display: block;
  background: green;
  position: absolute;
}

<div class="App">
  <div class='relativeParent'>
    <div class='absoluteChild'>test</div>
  </div>
  <div class='relativeParent'>
    <div class='absoluteChild'>asd asdf asdf asdf asdfa sdf</div>
  </div>
</div>

Answer 1

将left: 50%;top: 50%;transform: translate(-50%, -50%); 添加到绝对div。

.relativeParent {
  width: 100px;
  height: 100px;
  background: blue;
  position: relative;
  overflow: visible;
  display: block;
  margin-bottom: 20px;
}

.absoluteChild {
  display: block;
  width: 100%;
  background: green;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.flexParent {
  background: green;
  display: flex;
  flex-wrap: wrap;
  width: 100px;
  min-height: 100px;
  justify-content: center;
  align-items: center;
  padding: 12px 0;
}

.flexParent .child {
  background: blue;
  padding: 8px;
}

<div class="App">
  <div class='relativeParent'>
    <div class='absoluteChild'>test</div>
  </div>
  <div class='relativeParent'>
    <div class='absoluteChild'>asd asdf asdf asdf asdfa sdf</div>
  </div>
  <div class='flexParent'>
    <div class='child'>asd asdf asdf asdf asdfa sdf asd asdf asdf asdf asdfa sdfasd asdf asdf asdf asdfa sdfasd asdf asdf asdf asdfa sdfasd asdf asdf asdf asdfa sdf</div>
  </div>
</div>