office-ui-fabric - How to center a Pivot header in Fluent UI?

Question

I want to use a pivot in Fluent UI to display the menu.

<Pivot linkSize={PivotLinkSize.large}>
        <PivotItem headerText='userInfo' headerButtonProps={}>
            <UserPage />
        </PivotItem>
        <PivotItem headerText='userConfig'>
            <UserSetting />
        </PivotItem>
        <PivotItem headerText='Store'>
            <StorePage />
        </PivotItem>
        <PivotItem headerText='SubInfo'>
            <SubInfo />
        </PivotItem>
</Pivot>

It displays like this:

But I want to let the Pivot Header to the center, I have tried to change the styles attribute, but didn't have any progress.

How to align the the Pivot Header to center?

Answer 1

If you want all buttons to be horizontically centered, just make the Pivot a flexbox and justify all of its items centered:

<Pivot linkSize={PivotLinkSize.large}
       styles={{ root: { display: 'flex', justifyContent: 'center' } }}>
        <PivotItem headerText='userInfo' headerButtonProps={}>
            <UserPage />
        </PivotItem>
        <PivotItem headerText='userConfig'>
            <UserSetting />
        </PivotItem>
        <PivotItem headerText='Store'>
            <StorePage />
        </PivotItem>
        <PivotItem headerText='SubInfo'>
            <SubInfo />
        </PivotItem>
</Pivot>