CSS HTML在图像上放置一个白色正方形

我有一个div，它的整个背景是一个图像。在图像的中间，我想要一个白色的盒子，里面有一些文字。我试着用相对位置，但这延伸了父母

这是我的密码

文本

文本

文本

试试这个：

<div id="desk-linkedIn-image" style="background: url('img/linkedin/at_desk_linkdenIn_optimization.jpg');width: 100%; position: relative" >
    <div style="background-color: #FFFFFF; width: 20%; height: 20%; left: 50%; top: 50%; margin-top: -5%;  margin-left: -5%; position: absolute">
        <p style="font-size: 20px;"> Text Text Text</p>
        <p style="font-size: 20px;"> Text Text Text</p>
        <p style="font-size: 20px;">Text Text Text</p>
    </div>
</div>

文本

文本

文本

您可能需要对这些值进行一些调整，以找到正确的中心

---

它应该可以工作，因为您可以通过专门将父项的位置设置为相对位置，子项的位置设置为绝对位置，将子项与其父项相对对齐。

将一个元素居中于另一个元素（水平和垂直）的基本设置始终是子元素的以下设置：

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

…加上-取决于内容-

宽度

和

高度

设置，以及父元素上的

位置：相对

。父元素具有定义的高度也很重要

html，
身体{
保证金：0；
身高：100%；
}
#桌面linkedIn图片{
背景：url(http://placehold.it/500x600/fd7)中心；
背景尺寸：封面；
宽度：100%；
身高：100%；
位置：相对位置；
}
.x{
背景：#fff；
宽度：475px；
宽度：50%；
身高：46%；
左：2%；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
#桌面linkedIn图片.xp{
字体大小：20px；
}

文本文本文本

文本文本文本

文本文本文本

尝试给子div一个绝对位置，然后给它一个左边距和上边距，类似这样

文本

文本

文本

您似乎有一个额外的

，我认为图像与此无关，对吗？这只是一个背景。@miken32，对了，这是背景，没有其他可能的复制品，这就是你要找的吗？