Ion-content centering not working

Ionic Framework
1

Please describe the question in detail and share your code, configuration, and other relevant info.

Screenshot 2024-02-09 at 12.19.55
Screenshot 2024-02-09 at 12.19.551320×194 17.2 KB

I am trying to simply center the image horizontally and vertically, but other than wrapping it in a div inside the ion-content nothing seems to be working.
I do need ion-content, as I have a linear-gradient background.
Thanks four your help.

2

IonImg is a block element so centering via margin: 0 auto should do the trick.

Here is some Vue sample code:

<template>
  <IonContent>
    <IonImg
      src="https://docs-demo.ionic.io/assets/madison.jpg"
      alt="The Wisconsin State Capitol building in Madison, WI at night"
      style="width: 200px; margin: 0 auto"
    />
  </IonContent>
</template>

<script lang="ts" setup>
import { IonContent, IonImg } from '@ionic/vue';
</script>