Ionic 3 ion-title cannot align center - ionic4

Question

I use Ionic 3, below the code cannot align the title to center, it moves a little bit right due to the ion-buttons. How can it be solved?
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-button (click)="close()">
<ion-icon name="arrow-back"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title text-center>{{bookName}}</ion-title>
</ion-toolbar>
</ion-header>

Answer 1

just add mode=ios at title like this
<ion-title mode=ios>Your Title</ion-title>
Tested in ionic 3, 4 and 5 both

Answer 2

You could try to wrap your title in a div like this:
<div text-center>
<ion-title>YOUR TITLE</ion-title>
</div>

Answer 3

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>

Answer 4

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
}
}

Answer 5

Use class ion-text-center like below:
<IonTitle class="ion-text-center">Game</IonTitle>

Answer 6

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>

Answer 7

Set text align center and indent it by -45px to adjust back button space
.header .toolbar-title{
text-align: center;
text-indent: -45px;
}

Answer 8

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

Answer 9

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
}),

Answer 10

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%;
}

Answer 11

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;
}

Answer 12

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>