Html 在小屏幕上以相对位置居中显示图像

我有一个多对图像描述表。在大屏幕上，图像是水平对齐的。问题是，在小屏幕（xs）中，图像没有居中（文本是）

我试过这个密码 此解决方案使图像居中，但由于边距的原因，它在移动设备上显示为水平滚动

一个图像的js小提琴：

HTML代码（在大屏幕上有四个按行显示的图像，但在移动屏幕上只显示一个接一个）：

---

总之，我想在小屏幕上居中显示图像。

图像本身没有居中，因为它使用：

.memberBoxImage img {
    position: absolute;
    top: 0;
    left: 0;
}

您可以使用以下方法在div内水平居中：

.memberBoxImage img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

---

如果你想确保它不会比容器大，你可以加入

width:100%
我使用了另一种方法，基本上摆脱了绝对定位。
这里有一个简单的例子：


.memberBoxImage img.memberImgFront{
位置：绝对位置；
排名：0；
左：0；
可见性：隐藏；
}
.memberBoxImage:悬停.memberImgFront{
能见度：可见；
}

小文本
更多小文本

确保已设置响应视口。它值一个谷歌：）
.memberBoxImage img {
    position: absolute;
    top: 0;
    left: 0;
}

.memberBoxImage img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}