Html 将图像与css页面中心对齐

我的图像有以下代码：

return <div class="imgContainer"><img src={broomAndText} alt="broomAndText" /></div>

但在手机和桌面上，它会转到页面的右侧，而不是实际居中。如何解决此问题？

您可以尝试：

.imgContainer {
    display: flex;
    align-items: center;
    justify-content: center;
}

---

您也可以通过使用位置来尝试这一点

.imgContainer{

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

使用display:flex，可以使图像垂直和水平居中

.imgContainer{
display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

将

添加到

标记中，这样可以更好地查看所有内容。 如果它仍然没有改变位置，添加上面答案中的代码，但是使用这个。如果您希望图像的大小也保持不变，在调整大小的情况下，请将宽度值更改为

vw

，将高度值更改为

vh

。VW代表视图宽度，反之亦然。

.imgContainer{
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：100vh；
}

---

在html头标记中添加以下内容

CSS

---

}

感谢您的回复，这在桌面上有效，但在手机上无效：（可能是因为图像在移动设备上没有正确调整大小，或者其他东西在不同的屏幕大小上改变了它的样式吗？这是我为div设置css的唯一地方，所以它不应该。它是gif，不确定这是否会产生不同，但我认为它应该随着屏幕变小而缩小。我喜欢这种方法h！但是，它使它可以在桌面上工作，但不能在移动设备上工作。当我使用浏览器中的设备工具栏并缩小它的大小时，它不会随着页面的大小而调整，而是一直向右移动。请为您的答案添加一些解释

.imgContainer{
display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.imgContainer{
display:flex;
width: 100vw:
justify-content: center;
}

display: flex;
align-items: center;
justify-content: center;