Trouble centering text over image in flexbox

Question

I have some trouble to centre text over an image in flexbox. I am trying to make 3 images that are next to each other and in the middle of each image there is some text which also has a semitransparent background. I've created a short jsfiddle to demonstrate my problem.

.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

Set position: relative; to your list items as shown below:

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