Ionic custom ion-tabs

How can I center a floating button with a label exactly in the center of an ion-tabs component? I’m facing an issue where the display gets shifted to the right on certain mobile devices, as shown in the photo.

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="albums-outline"></ion-icon>

    <ion-tab-button tab="tab2">
      <ion-icon name="people-outline"></ion-icon>


    <ion-tab-button tab="tab3">
      <ion-icon name="card-outline"></ion-icon>

    <ion-tab-button tab="tab4">
      <ion-icon name="settings-outline"></ion-icon>
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
    <ion-icon name="add-outline"></ion-icon>


I want make the io-tabs like design in Figma


Hello, maybe this video can help you Ionic 5+ Custom tabs UI (2021) - Episode 2 | Custom Tabs Series - YouTube