Html 使用flexbox将div内部图像居中

尝试使用flexbox将一个div放在图像的中心（我只想要flexbox），但由于img没有结束标记，我无法使它工作。怎么办

.uno{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

将此文本居中

您不能在

img

标记中放置其他元素。正如其他人所说，使用

背景图像将更有意义，但我猜这是您需要这样的背景图像的原因

对于您想要的方式，您必须将图像设置为
位置：绝对；z指数：0和
h1
到
z-索引：1
，另外，
.uno
的高度需要重置，否则可能会剪掉页面边缘


正文{
高度：100vh；
宽度：100%；
}
乌诺先生{
显示器：flex；
证明内容：中心；
对齐项目：居中；
身高：100%；
}
img{
位置：绝对位置；
z指数：0；
}
h1{
z指数：1；
}

将此文本居中
您不能在
img
标记中放置其他元素。正如其他人所说，使用
背景图像将更有意义，但我猜这是您需要这样的背景图像的原因

对于您想要的方式，您必须将图像设置为
位置：绝对；z指数：0和
h1
到
z-索引：1
，另外，
.uno
的高度需要重置，否则可能会剪掉页面边缘


正文{
高度：100vh；
宽度：100%；
}
乌诺先生{
显示器：flex；
证明内容：中心；
对齐项目：居中；
身高：100%；
}
img{
位置：绝对位置；
z指数：0；
}
h1{
z指数：1；
}

将此文本居中
要将文本放置在图像上，请为
h1
元素指定绝对位置，并在容器元素上添加相对位置

由于您已将flex容器上的
对齐内容
和
对齐项目
属性设置为
居中
，因此当文本放置在图像上时，它将水平和垂直居中


.uno{
显示器：flex；
证明内容：中心；
对齐项目：居中；
位置：相对位置；
}
h1{
位置：绝对位置；
}

将此文本居中
要将文本放置在图像上，请为
h1
元素指定绝对位置，并在容器元素上添加相对位置

由于您已将flex容器上的
对齐内容
和
对齐项目
属性设置为
居中
，因此当文本放置在图像上时，它将水平和垂直居中


.uno{
显示器：flex；
证明内容：中心；
对齐项目：居中；
位置：相对位置；
}
h1{
位置：绝对位置；
}

将此文本居中
是否尝试将文本放置在图像顶部？如果将图像作为背景。将文本与文本对齐将很容易center@KPranavRam-否，水平和垂直居中vertically@DanielprabhakaranN-我知道，但我不能。这就像这里展示的一样。在一个img中的Div，嗯，很有趣…你是想把文本放在图像的顶部吗？如果你把图像作为背景。将文本与文本对齐将很容易center@KPranavRam-否，水平和垂直居中vertically@DanielprabhakaranN-我知道，但我不能。就像这里展示的一样。在一个img里面的Div，嗯，很有趣。。。