CSS转换DIV没有转换子

Question

我正在尝试使用Transform在CSS中集中DIV，但我有另一个孩子在其中被置于浮动的绝对位置：

#container {
  top: 50%;
  left: 50%;
  position: fixed;
  transform: translate(-50%, -50%);
}
.popup {
  top: 30px;
  left: 30px;
  position: absolute;
  display: none;
}
.popuptrigger:focus + .popup {
  display: initial;
}

<div id="container">
  <input class="popuptrigger">
  <div class="popup">Something else</div>
</div>

不幸的是，popup div正在容器div的顶部/左侧对齐

如果没有javascript或jQuery，我怎么能这样做，我需要是纯CSS

Answer 1

根据您需要显示的信息，您可以将输入本身居中并将其从容器中移除。然后，您可以在容器中提供任何其他信息，确保不要与输入重叠。

实施例

.popuptrigger {
  top: 50%;
  left: 50%;
  position: fixed;
  transform: translate(-50%, -50%);
}
.container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 3em;
  text-align: center;
  background: #F00;
  padding: 10px;
}
.popup {
  position: absolute;
  top: 30px;
  left: 30px;
  display: none;
}
input {
  display: block;  
  margin-bottom: 10px;
}
.popuptrigger:focus + .popup {
  display: initial;
}

<input class="popuptrigger" value="firstInput">
<div class="popup">This is the popup text.</div>

<div class="container">
  <input value="second input">
   <input value="third input">
</div>