子div符合视口高度，而不是父div高度

Question

我有多个包装div，每个div都包含一张图片：

（为简洁起见，img URL用＃代替）

<div class="grid-item"><img src=#><div class = "middle"><div class = "text"></div>Build the Big Delta 3D printer</div></div>

<div class="grid-item"><img src=#><div class = "middle"><div class = "text">3D printed Vacuum cleaner for CNC machine</div></div></div>

<div class="grid-item"><img src=#><div class = "middle"><div class = "text">How to make the BEST butter cookies!</div></div></div>

父div（“网格项”）具有以下样式：

.grid-item{
max-width: 1fr;
max-height: auto;
padding:0.6em;
}

和子div（“中间”）的样式如下：

.middle{
position: absolute;
text-align: center;
top: 50%;
}

据我了解，“顶部：50％”应将“ .middle” div和其中包含的所有文本移动到父div的中间，这也是每个图像的中间。

但是，它将所有文本移到视口的中间。剩下一行文字。

谁能告诉我我要去哪里错了？

Answer 1

position: absolute需要一个相对的容器来容纳它。 如果您希望.middle相对于.grid-item是绝对的，则应在您的CSS中包括.grid-item { position: relative }。