Align searchBar on center in margin bottom

Hello

I am trying to centralize my search bar in the center of the margin bottom of my header and leave it fixed so that when the user scrolls it is still on the screen but I am not getting it, could you help me?
Stack: Ionic5 with Angular.

my code is:

<ion-header>
  <ion-toolbar>
    <ion-title>categories</ion-title>
  </ion-toolbar>

</ion-header>

<ion-content>
  <ion-searchbar style="color: black !important; width: 80vw; margin: 0 auto;" align-center placeholder="search"></ion-searchbar>
</ion-content>

Currently it looks like this:
Captura de Tela 2020-04-21 às 13.06.09

But I need this:
Captura de Tela 2020-04-21 às 13.06.09

Thanks =)

<ion-header>
  <ion-toolbar>
    <ion-title>categories</ion-title>
  </ion-toolbar>

</ion-header>

<ion-content>
  <ion-searchbar style="color: black !important; width: 80vw; margin: 0 auto;display:block;position:relative;top:-50px;" align-center placeholder="search"></ion-searchbar>
</ion-content>
1 Like