Banner not centered on AMP page

I have the following style and code;

.ai-center {
    margin: 8px auto;
    text-align: center;
    clear: both;
}

<div class="ai ai-center ai-12">
  <img src="https://via.placeholder.com/100x100/9e00ff/faff0a.png?text=100">
</div>

The banner is centered as expected.

However on AMP page the banner is not centered:

.ai-center {
    margin: 8px auto;
    text-align: center;
    clear: both;
}

<div class="ai ai-center ai-12">
  <amp-img src="https://via.placeholder.com/100x100/9e00ff/faff0a.png?text=100" width="100" height="100" sizes="(min-width: 100px) 100px, 100vw" class="amp-wp-enforced-sizes i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-layout" style="width: 100px;"><i-amphtml-sizer style="display: block; padding-top: 100%;"></i-amphtml-sizer><img decoding="async" class="i-amphtml-fill-content i-amphtml-replaced-content" src="https://via.placeholder.com/100x100/9e00ff/faff0a.png?text=100"></amp-img>
</div>