CSS v 对齐的绝对 div 在相对 div 内，其高度由内部的 img 确定

Question

我正在尝试使div（"#conteudo_produtos3_txt"）垂直对齐在另一个div（"#conteudo_produtos3"）的中间，该div的高度由其内部的img确定。

我尝试在容器上使用 display：table 和 display：table-cell; 垂直对齐：中间在内部div 中，但它不起作用。

我可以只使用 CSS 来做到这一点吗？

这是 HTML：

<div id="conteudo_produtos3">
    <img width="100%" src="imagens/conteudo_produtos3.jpg" />
    <div id="conteudo_produtos3_txt">
        <h1>b. clue</h1>
        <p>ideal para perfumar ambientes pequenos.<br>
        <br>
        alcance:<br>35 m² (100 m³)<br>
        <br>
        duração do refil:<br>15 a 60 dias;<br>
        <br>
        alimentação:<br>3 pilhas AA;<br>
        <br>
        programação:<br>dias x horas x intervalo de aspersão x volume por aspersão.</p>
    </div>
</div>

和 CSS：

#conteudo_produtos3{ position:relative; width:100%; display:table; }
#conteudo_produtos3_txt{ position:absolute; left:20%; font-family:moskauLight; text-align:left; display:table-cell; vertical-align:middle; z-index:2; }

Answer 1

试试这个：

#conteudo_produtos3_txt {
position: absolute;
top: 50%;
left: 50%;
tex-align:center;
margin-top: -100px;
margin-left: -200px;

}

margin-top和margin-left可以根据您的需要进行调整。

Answer 2

你可以试试：

#conteudo_produtos3_txt {
    font-family:moskauLight; 
    left:20%; 
    position:absolute;
    text-align:left;
    top: 50%; 
    transform: translateY(-50%); 
    z-index:2; 
}

Answer 3

您始终可以在内部div 的边距顶部属性上使用 calc() 函数。 将其设置为 50% 减去图像高度的一半。

例如，如果图像的高度为 300px，则可以将 margin-top 属性设置为

#conteudo_produtos3_txt {
  margin-top: calc(50% - 150px);
}

这应该在图像中垂直对齐。

Answer 4

你应该使用填充：自动作为外部div或边距：auto用于子div