为何CSS的align-items无法将我的文本水平居中？

我编写了以下CSS和HTML代码，为flex容器设置了align-items: center属性，但该属性未正常生效，无法将文本水平居中，不清楚自己哪里出错了。

CSS代码：

.top-part {
    position: relative;
    display: flex;
    background:  rgba(51, 102, 255,0.7);
    width: 100%;
    height: 8cm;
    background-position: center;
    background-size: cover;
}

.not-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family:'Consolas','Courier New','Trebuchet MS';
    color: white;
    line-height: .5cm;
    flex-wrap: wrap;
}

HTML代码：

<section class="top-part">
        <div class="not-content">
              <h1><strong>BIG TEXT</strong></h1>                
              <h4>TEXT</h4>
        </div>        
</section>

问题核心在于父容器.top-part未设置子元素的对齐规则：

1. 你的.not-content确实配置了align-items: center，但它的宽度默认是"包裹内容"的尺寸，所以文本在这个小容器里是水平居中的，但整个.not-content容器本身在父容器.top-part里是靠左对齐的，视觉上就显得文本没居中。
2. 要实现文本在页面整体水平居中，有两种简单可行的方法：

方法一：给父容器.top-part添加对齐属性 #

修改.top-part的CSS，补充水平和垂直居中的规则：

.top-part {
    position: relative;
    display: flex;
    background:  rgba(51, 102, 255,0.7);
    width: 100%;
    height: 8cm;
    background-position: center;
    background-size: cover;
    justify-content: center; /* 新增：水平居中子元素 */
    align-items: center; /* 新增：垂直居中子元素 */
}

方法二：让.not-content占满父容器宽度 #

给.not-content添加width: 100%，让它的align-items: center作用于整个父容器宽度：

.not-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family:'Consolas','Courier New','Trebuchet MS';
    color: white;
    line-height: .5cm;
    flex-wrap: wrap;
    width: 100%; /* 新增：占满父容器宽度 */
}

两种方法都能达到你想要的文本水平居中效果，可根据实际需求选择。

内容的提问来源于stack exchange，提问作者no name