Ionic 4 ion-title Center for All Device Solution In 2021

in ionic header some time we have some icon on the right side like a notification icon and nothing on the left side..  in this situation we need our title in the center. in that situation, we use a position to make it center here is the code for both android and ios devices.

ion-header {

  //  for android  device

  .ion-text-center {
    position  : absolute;
    top       : 20px;
    left      : 0;
    right     : 0;
    width     : 80%;
    margin:0 auto;
    text-align: center !important;
    display   : block;
 
  }

//  for ios device

  &.ios {
    .ion-text-center {
      top: 16px !important;
    }
  }



}

Leave a Comment