CSS Flex align-items:center在小屏幕下无法使容器内所有元素居中

问题现象 #

在项目的header中使用以下Flex布局规则，试图让内部元素居中：

header {
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    margin-right: 20px;
    align-items: center;
}

但在小屏幕下，H1元素始终左对齐，H2元素却能正常居中；大屏幕下所有元素表现正常。

原因排查 #

当flex-direction: column时，align-items: center的作用是让子元素在水平方向上居中，但这一效果生效的前提是子元素的宽度未占满父容器。如果H1元素被设置了width: 100%（可能是浏览器默认样式或自定义规则），它会撑满header的宽度，此时align-items: center无法改变其位置，需要通过text-align: center来让内部文本居中。

另外，也需要检查是否存在针对小屏幕的媒体查询，给H1添加了text-align: left或强制宽度的规则，导致Flex的居中效果被覆盖。

解决方案 #

1. 为H1元素添加文本居中样式，并确保其宽度不会撑满容器：

h1 {
    text-align: center;
    width: auto;
}

2. 如果存在媒体查询或其他优先级更高的CSS规则覆盖了样式，可调整选择器优先级（或临时使用!important排查，不推荐长期依赖）：

h1 {
    text-align: center !important;
    width: auto !important;
}

内容的提问来源于stack exchange，提问作者Omar Juvera