我刚解决了和你一模一样的问题——用Ionic自带的text-center属性或者ion-text-center类在<ion-list-header>里完全没效果，但在<ion-item>里却正常。这其实是因为<ion-list-header>默认的布局特性导致的，下面给你两个符合Ionic4最佳实践的简洁方案：

方案一：调整Flex布局对齐（推荐） #

<ion-list-header>默认是display: flex布局，只要给它加上justify-content: center就能让内部的<ion-label>水平居中，完全贴合Ionic的原生布局逻辑：

HTML代码 #

<ion-list-header class="list-header-centered">
  <ion-label>Text centered</ion-label>
</ion-list-header>

CSS样式 #

.list-header-centered {
  justify-content: center;
}

方案二：修改父容器为Block布局 #

如果你更倾向于复用Ionic自带的文本居中工具类，也可以把<ion-list-header>的显示模式改成block，这样给<ion-label>加ion-text-center就能正常生效了：

HTML代码 #

<ion-list-header class="list-header-block">
  <ion-label class="ion-text-center">Text centered</ion-label>
</ion-list-header>

CSS样式 #

.list-header-block {
  display: block;
}

为什么之前的方法无效？ #

Ionic4的<ion-list-header>默认使用Flex布局，父容器的Flex对齐规则优先级高于子元素的text-align设置，所以哪怕你给<ion-label>单独加了居中类，也会被父容器的Flex布局规则覆盖。只有调整父容器的Flex对齐方式，或者切换到Block布局，才能让文本真正实现水平居中。

内容的提问来源于stack exchange，提问作者Cesar Jacquet