How to center the icon in the button

Question

In my ionic 3 project, the button icon doesn't become centered. When I test in browser it works correctly and in android devices it also shows correctly in the center.

But only in ios devices does it not show in the center.

The screenshot above is from an ios device. In that the +,- symbols are not aligned in the center.

Html code:

<ion-col style="display: contents">
  <button primary large class="inbtn" (click)="decrement()">
      <ion-icon name="remove" ></ion-icon>
</button>
<h2 style="margin-left: 7px;margin-top: 0px;font-size: 2.4rem;"><b>{{currentNumber}}</b></h2>
<button primary large class="inbtn" (click)="increment()" >
  <ion-icon name="add" ></ion-icon>
</button>
</ion-col>

css:

.inbtn{
     height: 30px;
    width: 30px;
    display: inline-block;
    border-radius: 50%;
    font-size: large;
    font-weight: 500;
    margin-left: 7px;
    vertical-align: middle;
    background-color:  #d8d8d8 !important;
    text-align: center;
  -webkit-appearance: none;
    }

Solution 1

Here is css what are you looking for you can fix height and width according to your requirement;

.inbtn{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;    
}

Solution 2

html code

 <ion-item>
   <ion-button class="center" color="success">Next</ion-button>
 </ion-item>

CSS

.center{
   margin-left: auto;
   margin-right: auto;
   display: block !important;
 }