Html CSS v-align绝对div内部相对div，其高度由内部img确定 我试图在另一个div（“πCONTUDUOOPRODUTSO 3”）的中间垂直对齐一个div（“{CONTUUDO PRODUTOS3TXT”），它的高度由它内部的IMG决定。

我尝试在容器上使用display:table和display:table单元格；垂直对齐：在内侧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>

---

您应该使用padding:auto作为外部div或margin:auto作为子div

您应该使用padding:auto作为外部div或margin:auto作为子div

您可以尝试：

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

你可以试试：

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

---

您可以始终在inside div的边距顶部属性上使用

calc（）

函数。将其设置为50%减去图像高度的一半

例如，如果图像的高度为300px，则可以将边距顶部属性设置为

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

---

这将使其在图像中垂直对齐。

您始终可以在inside div的margin top属性上使用

calc（）

函数。将其设置为图像高度的50%减去一半

例如，如果图像的高度为300px，则可以将边距顶部属性设置为

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

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

尝试以下操作：

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

}

页边距顶部

和

页边距左侧

可以根据您的需要进行调整。

尝试以下方法：

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

}

---

页边距顶部

和

页边距左侧

可以根据您的需要进行调整。

就是这样。谢谢@丹尼尔，我只想问：

z-index:2在这种情况下是没有用的，对吗？Nope@HermanNz-the
display:table也不再需要了（在本例中）。^Reason:#conteudo_produtos3_txt位于标记中的img之后，并自动设置为完成此操作的TOP。谢谢@丹尼尔，我只想问：
z-index:2在这种情况下是没有用的，对吗？Nope@HermanNz-the
display:table也不再需要（在本例中）。^原因：#conteudo_produtos3_txt位于标记中的img之后，并自动设置在顶部。但是，我不知道如何在不调整的情况下自动居中/居中：D但是，我不知道如何在不调整的情况下自动居中/居中：D