将图片放在div中的文字居中

Question

我有一些 “背景” 文本的容器。 我想在此容器中和文本上方居中放置图像。 不图片上的文字。

我想找来重现效果如下，其中鞋结束的 Desrupt （？）的文本。

但是，我无法将图像居中放置在容器中。 我创建了THIS PEN来展示我的物品。

如何根据演示图像创建类似的效果？ 理想情况下，企鹅的图像应该是其容器宽度的75％，并且“ What is lorem”文本应该能够以例如边距，在20％（以使得文本的可读性，而不是被完全隐藏在图像的后面），而不会影响图像的位置。

我的CSS

/* Image over text */
.image-over-text {
    position: relative;
    width: 100%;
    height: auto;
}
.image-over-text p {
    color: #000;
    font-size: 4em;
    margin-top: 50%;
    margin-bottom: 50%;
    text-align: center;
    font-weight: 700;
    border: 1px solid green;
}
.image-over-text img {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 75%;
    height: auto;
    border: 1px solid red;
}

Answer 1

您可以这样做：

.image-over-text img {
    position: absolute;
    left: 50%;                        /* horizontal alignment */
    top: 50%;                         /* vertical alignment */
    transform: translate(-50%, -50%); /* shift the image back to center */
    width: 75%;
    height: auto;
    border: 1px solid red;
}

left和top属性移动图像，使其左上角位于容器的中心，然后transform将其向后移动图像高度的一半，并保留其宽度的一半。

作为用于文本的定位，只要给它margin-top: 20%，并且不需要一个边距属性。