html - 为什么图像在小手机屏幕上没有按计划对齐？

Question

body{
  overflow-x:hidden;
  overflow-y:hidden;
    }

 <a href="#"> <img src="http://placehold.it/1000x800?text=1"></a>

但是我希望图像的中心在移动设备上可见，如下所示:

无法在我的应用程序中更改图像尺寸和代码格式。

Answer 1

在这种特殊情况下，您可以使用下面的 CSS 将图像(即链接)居中。但我想你会有比这更多的元素......

注意:通过这种方式，如果图片小于屏幕，它也会居中。

body{
  overflow-x:hidden;
  overflow-y:hidden;
    }
a {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  }
  

<a href="#"> <img src="http://placehold.it/1000x800?text=1"></a>