Ionic 3 ion-title cannot align center

just add mode=ios at title like this

<ion-title mode=ios>Your Title</ion-title>

Tested in ionic 3, 4 and 5 both

You could try to wrap your title in a div like this:

<div text-center>
    <ion-title>YOUR TITLE</ion-title>
</div>

This is not ionic v3, the components that you are using are ionic v4, anyway, you can try it this way:

<ion-header>
  <ion-toolbar color="primary" text-center>
    <ion-buttons slot="start">
      <ion-button (click)="close()"><ion-icon name="arrow-back"></ion-icon></ion-button>
    </ion-buttons>
    <ion-title>{{bookName}}</ion-title>
  </ion-toolbar>
</ion-header>

An easy way is to do it with css you can put this class

page-name {
     ion-title {
         position: “relative”;
         left: 5px  —- here what you desire 
      }
}

Use class ion-text-center like below:

<IonTitle class="ion-text-center">Game</IonTitle>

For Ionic 4:

In your ion-title component,

• Add class="ion-text-center" to center-align it. This will also produce the problematic offset to the right, due to button.

• Add style="margin-left: -52px;" (calculate the problematic offset you want to equalize, in my case it was 52px).

.

<ion-toolbar> 
     <ion-buttons slot="start"> 
<ion-menu-button></ion-menu-button> 
</ion-buttons> 
     <ion-title class="ion-text-center" style="margin-left: -52px;"> 
         My App 
     </ion-title> 
 </ion-toolbar>

Set text align center and indent it by -45px to adjust back button space

.header .toolbar-title{
    text-align: center;
    text-indent: -45px;
}

Try this align="center"

<ion-header>
 <ion-toolbar>
 <ion-title align="center">Register</ion-title>
  </ion-toolbar>
</ion-header>

Instead of tweaking styles and element attributes, you can simply set the ionic config to set the title centered across all platforms.

IonicModule.forRoot(MyApp, {
  backButtonText: 'Back',
  backButtonIcon: 'ios-arrow-back',
  mode: 'ios', // THIS CONFIG CENTERS THE TITLE ACROSS ALL PLATFORMS
  iconMode: 'md',
  modalEnter: 'modal-slide-in',
  modalLeave: 'modal-slide-out',
  tabsPlacement: 'bottom',
  pageTransition: 'ios-transition',
  swipeBackEnabled: true
}),

The below solution worked for me. Even if there is a button on one side, it will still work.

ion-title {
  text-align: center;
  padding: 0 78px 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Accepted answer doesn't align title on center position in perfect manner. I have added custom CSS to achieve this.

Ex.

<ion-header>
  <ion-toolbar color="primary">
    <ion-title class="header-title">Payment Detail</ion-title>
    <ion-buttons slot="secondary">
      <ion-button>
        <ion-icon name="log-out" class="logout-icon" (click)="logout()"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

.header-title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0 150px;
    text-align: center;
}

for ionic 5x this seems to work

<div style="margin-left: auto;margin-right: auto;" classs="ion-text-center">
    <ion-title>Testimonials</ion-title>
  </div>