Angular 如何使用FlexLayout将文本居中

我正在开发一个响应性导航组件。我可以右对齐链接，但无法将组件中的“买卖”文本居中。下面是HTML代码

<div class="app-container">
   <mat-toolbar  color="white"
       fxLayoutGap="8px"  
       class="app-toolbar" >  
       <div fxHide.gt-xs>
        <button mat-icon-button (click)="onToggleSidenav()">
            <mat-icon>menu</mat-icon>
        </button>
       </div>
       <div class="icon-center" fxLayout fxLayoutAlign="center">
        BuySell
       </div>
            <div fxFlex fxLayout fxLayoutAlign="end" fxHide.xs>
                <ul fxLayout fxLayoutGap="15px" class="navigation-items">
                    <li>
                        <a routerLink="/home">Home</a>
                    </li>
                    <li>
                        <a routerLink="/auth">Log In</a>
                    </li>
                </ul>
         </div>
        <ng-template #logOut>
        <div >
            <button class="button--text-only" (click)=onLogOut()  
               routerLink="home">Log Out</button>
         </div>
        </ng-template>
    </mat-toolbar>
</div>

菜单
买卖


像这样试试

<div class="icon-center" fxLayout="column" fxLayoutAlign="center center" fxFlex>
        BuySell
</div>


买卖

像这样试试

<div class="icon-center" fxLayout="column" fxLayoutAlign="center center" fxFlex>
        BuySell
</div>


买卖

检查我是否已更新了
stackblitz
。如果这不是你想要的方式，请告诉我。检查我是否已更新了
stackblitz
。如果这不是你想要的方式，请告诉我。