How to center the ion-button inside ion-item?

Question

How should I center ion-button inside ion-item?

<ion-list>
  <ion-item>
    <ion-button>Sample</ion-button>
  </ion-item>
</ion-list>

I tried some class from CSS Utilities but with no avail.

Answer 1

You can do something like this:

CSS:

.center-button {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-item: center;
}

HTML:

<ion-list>
  <ion-item>
    <div class='center-button'>
       <ion-button>Sample</ion-button>
    </div>
  </ion-item>
</ion-list>