在Flexbox中，文字在图片上居中出现问题

Question

我在将文本放在flexbox中的图像上居中时遇到了一些麻烦。我正在尝试制作3个彼此相邻的图像，并且在每个图像的中间有一些文本也具有半透明的背景。我创建了一个简短的jsfiddle来演示我的问题。

.hello li {
    margin: 24px 0px;
    display: flex;
}

.hello img {
    height: 180px;
    width: 300px;
    justify-content: space-between;
}

.hello li p {
    text-transform: uppercase;
    background: rgba(36, 36, 36, 0.5);
    color: white;
    width: 180px;
    height: 60px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    justify-content: center;
    align-items: center;
    text-align: center;
    display: inline-flex;
}

Answer 1

设置位置：相对；到您的列表项，如下所示：

.hello li {
    margin: 24px 0px;
    display: flex;
    position: relative;
}