Как сделать так, чтобы «ионная карта» была меньше, но по центру экрана (ионные 4)

Question

Пожалуйста, я был бы признателен за помощь.Я уверен, что это довольно просто, но я не могу преодолеть ионные 4 класса, которые они помещают позади элементов, и мне нужна ионная карта, чтобы быть маленькой.

Это мой первый раз на StackOverFlow.Вот мой код:

<ion-content color="tertiary" padding margin>
<ion-card color="medium" >
    <ion-card-content>
      <ion-title>Elija su Zona</ion-title>  
      <ion-list> 
        <ion-item *ngFor="let item of zonas">
          <ion-label (click)=gotoHomeByZona(id)>{{item.nombre}}</ion-label>
        </ion-item>
        </ion-list>
    </ion-card-content>
  </ion-card>

Answer 1

<div style="width:80%; margin: 0 auto">
  <ion-card color="medium" >
    <ion-card-content>
      <ion-title>Elija su Zona</ion-title>  
      <ion-list> 
        <ion-item *ngFor="let item of zonas">
          <ion-label (click)=gotoHomeByZona(id)>{{item.nombre}}</ion-label>
        </ion-item>
        </ion-list>
    </ion-card-content>
  </ion-card>
</div>