0

I am trying to replace a default OHS index.html with an image (1640px x 248px) that should be centred both horizontally and vertically on whatever screen its shown on.

e.g. 4K screen, 1920x1080, 1024 x 768, tablet, phone etc.

Ive tried what feels like hundreds of "solutions" but none actually work on all displays. I can add html and css that look great on a PC but when viewed on a phone the left and right of the image are missing.

There is no text, just an image.

Thanks

David Janes
  • 69
  • 1
  • 6

1 Answers1

0

You can use flex to center an image horizontally and vertically

<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>
bron
  • 1,457
  • 1
  • 9
  • 18