Es gibt ein Div, das einen dynamischen Inhalt hat. Die Größe der Eltern beträgt 100% des Körpers und das Kind ist unbekannt. Die translateY-Technik (-50%) funktioniert nur, wenn die Höhe eines untergeordneten Inhalts kleiner als die des übergeordneten Elements ist. Aber wenn es mehr Kind div (grün) ist, beginnt das Elternteil (gelb) überzulaufen, wie auf dem Bild unten. Was ist ein geeigneter Weg, um Eltern-Div zu setzen? Erhöhen Sie die Höhe und fügen Sie einige Füllungen hinzu.

.body {
  height: 300px;
  background: red;
}
.parent {
  height: 100%;
  position: relative;
  background: rgb(105, 199, 115);
   
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: green;
  width: 200px;
 }

<div class="body">
  <div class="parent">
    <div class="child">
      Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, Sample content, 
    </div>
  </div>
</div>