css无法结合绝对定位、最大尺寸和定心

我已经完成了我的css部分，并且认为我知道所有常用的技巧，但这一个难倒了我。我正试图绝对地将标题框放置在图像（实现为背景图像）上，并列出要求：

• 应该居中
• 最大宽度和最大高度应为图像的百分比
• 应该有底部10%从父，并调整了更多的内容
• 应隐藏超过最大大小的文本内容，但圆角

  边框半径的背景应保持可见

以下是我最近的一次——它在居中时失败：

.container{
背景图像：url（'http://via.placeholder.com/400x400');
高度：400px；
宽度：400px；
位置：相对位置；
}
.标题{
位置：绝对位置；
底部：10%；
保证金：0自动；
最大宽度：75%；
最高高度：25%；
溢出：隐藏；
框大小：边框框；
背景色：rgba（75,75,75,0.4）；
边界半径：5px；
填充：10px；
文本对齐：居中；
颜色：白色；
}

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。

用所需的尺寸和位置将标题包装在另一个div中

.container{
背景图像：url（'http://via.placeholder.com/400x400');
高度：400px；
宽度：400px；
位置：相对位置；
保证金：1em自动；
}
.包裹{
宽度：75%；
最高高度：80%；
位置：绝对位置；
转化：translateX（-50%）；
底部：10%；
边界半径：5px；
左：50%；
溢出：隐藏；
}
.标题{
框大小：边框框；
背景色：rgba（75,75,75,0.4）；
填充：10px；
文本对齐：居中；
颜色：白色；
}

知识是一种美德，是一种美德，是一种美德，是一种美德。我们需要一个最低限度的练习


知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。二人世界
这是一种令人厌恶的行为，因为它是一种不平等的行为。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。Lorem ipsum dolor sit amet，Concertetur Adipising
Elite说，我们暂时不需要劳动和金钱。但是，在最低限度上，我们需要一个实验室来进行日常工作。在沃鲁帕特·维利特·埃塞的《雷德亨德瑞特》中，两人或两人互为受害者
纤毛多洛雷欧盟福吉亚无巴黎。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

将

左：0px

和

右：0px

添加到

。标题

.container{
背景图像：url（'http://via.placeholder.com/400x400');
高度：400px；
宽度：400px；
位置：相对位置；
}
.标题{
位置：绝对位置；
底部：10%；
保证金：0自动；
最大宽度：75%；
最高高度：25%；
溢出：隐藏；
左：0px；
右：0px；
框大小：边框框；
背景色：rgba（75,75,75,0.4）；
边界半径：5px；
填充：10px；
文本对齐：居中；
颜色：白色；
}

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。

看起来很有希望-在需要的地方尝试一下。令人惊讶的是，它可以最大宽度和最大边距工作！这在Chrome、Firefox上达到了预期效果，但在IE中标题却占据了左侧。我希望这能奏效，因为这是一个简单的附加组件，但浏览器在解析

left:0；右：0；最大宽度：75%

在我首次尝试此操作时，标题将仅扩展到父级的最大宽度50%。我确信这与

左：50%

有关。在这里的代码片段中，我可以看出这不是一个问题-你知道我在容器元素上使用的css是否会导致这种行为吗？我最大的问题是使可见框居中，但宽度可变-对于一个容器来说很小