Question

我正在尝试将默认OHS index.html替换为图片（1640px x 248px），该图片应在显示的任何屏幕上水平和垂直居中。

例如4K屏幕，1920x1080、1024 x 768，平板电脑，手机等。

我已经尝试了数百种“解决方案”，但实际上在所有显示器上都无法使用。我可以添加在PC上看起来不错的html和css，但是在电话上查看时，图像的左右两侧都丢失了。

没有文字，只有图像。

谢谢

Answer 1

您可以使用flex将图像水平和垂直居中

<style>
html, body {
  height: 100%;
}
.center-image {
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
}
</style>
<body>
  <div class="center-image">
    <img src="..." alt="">
  </div>
</body>

将单个图像居中以实现任何屏幕分辨率

1 个答案: