How to center image with width in ion-card - ionic-framework

Question

I need to center my image in ion-card. I am using width to small the image so thats why its causing problem to center image.
My html code.
<ion-content>
<ion-card class="no-shadow">
<ion-grid class="ion-no-padding">
<ion-row class="ion-align-items-center ion-justify-content-center" >
<ion-col size="6" >
<ion-card class="card-img">
<img src="../../assets/imgs/cat-icon.png" >
<div><h4>Programming</h4></div>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-card>
</ion-content>
.scss
ion-content{
--ion-background-color: #202849 !important;
}
.no-shadow{
box-shadow: none !important;
}
ion-row{
ion-card{
text-align:center;
width:100% !important;
margin: 0 !important; // I also dont think important is neccesary
img{
width:90px;
border-radius: 50px;
}
}
}
Its showing image on left side. I need to show in center here is the image of output

Answer 1

<ion-card>
<div style="display: flex; align-items: center;justify-content: center;">
<img alt="image" src="assets/logo.png" />
</div>
</ion-card>

Answer 2

I think this will solve your problem
HTML code:
<ion-content>
<ion-card class="no-shadow">
<ion-grid class="ion-no-padding">
<ion-row class="ion-align-items-center ion-justify-content-center">
<ion-col size="6">
<ion-card class="card-img">
<img src="assets/shapes.svg">
<div>
<h4>Programming</h4>
</div>
</ion-card>
</ion-col>
<ion-col size="6">
<ion-card class="card-img">
<img src="assets/shapes.svg">
<div>
<h5>Programming</h5>
</div>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-card>
</ion-content>
SCSS:
ion-content {
--ion-background-color: #202849 !important;
}
.no-shadow {
box-shadow: none !important;
}
ion-row {
ion-card {
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
margin: 0px;
img {
width: 90px;
border-radius: 50px;
}
}
}
and !important is not required as you changing in page level without important it will work.