OK, so the code here almost works: https://philipwalton.github.io/solve...cal-centering/ when the class code from the linked github page is used: https://github.com/philipwalton/solv...ts/aligner.css

I made 3 changes.

width: 108vw; -- in order to get the image centered horizontally
height: 100vh -- In order to get the image centered vertically

body set to overflow: hidden; -- in order to deep the scrollbars from showing up (they were turned off in the page already.

Here's the code that worked:

Code:
... (boilerplate webview code above)
<style>
.Aligner {
  display: flex;
  align-items: center;
  min-height: 24em;
  justify-content: center;
  height: 100vh;
  width: 108vw;
}


.Aligner-item {
  flex: 1;
}


.Aligner-item--top {
  align-self: flex-start;
}


.Aligner-item--bottom {
  align-self: flex-end;
}


.Aligner-item--fixed {
  flex: none;
  max-width: 50%;
}
body {
  overflow: hidden;
}


</style>
</head>
<body>
<div class="Aligner">
  <div class="Aligner-item Aligner-item--top"><p>top</p></div>
  <div class="Aligner-item"><img src="loadDatalg.gif" alt="centered image" /></div>
  <div class="Aligner-item Aligner-item--bottom"><p>bottom</p></div>
</div>
</body>
</html>
The top and bottom were left just for testing.

Hank