1. 在样式文件（如style.css）中添加以下代码：

::ng-deep .mat-ink-bar { display: flex; justify-content: center; }

2. 将注入器配置中的MAT_TABS_CONFIG设置为以下内容：

import { MAT_TABS_CONFIG } from '@angular/material/tabs';

@NgModule({ providers: [ { provide: MAT_TABS_CONFIG, useValue: { animationDuration: '0ms', alignTabs: 'center' } } ] }) export class AppModule { }

这将为MatTabs配置选项中心对齐标签。

3. 如果以上两种方法都无效，请尝试在Angular应用程序的main.ts文件中添加以下代码：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { enableProdMode } from '@angular/core'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment';

if (environment.production) { enableProdMode(); }

// Add this line of code platformBrowserDynamic().bootstrapModule(AppModule, [{ provide: APP_BASE_HREF, useValue: '/' }]);

这将动态引导应用程序并在引导时设置基href为“ /”。

以上三种方法中的任何一种都应该解决InkBar / BarBelowTab不居中的问题。