align-items: center 仅对 Flex 容器生效，若父元素未设置 display: flex，该属性将被忽略；本文详解如何正确实现垂直+水平居中，并提供可直接运行的修复代码与关键注意事项。
css 中 `align-items: center` 仅对 flex 容器生效，若父元素未设置 `display: flex`，该属性将被忽略；本文详解如何正确实现垂直+水平居中，并提供可直接运行的修复代码与关键注意事项。
在 CSS 布局中，align-items: center 是一个常被误用的属性——它本身不具备独立居中能力，必须配合 display: flex（或 display: grid）才能生效。观察原始代码可知：.head 类虽声明了 align-items: center 和 text-align: center，但缺少关键的 display: flex 声明，导致 align-items 完全失效，仅 text-align: center（控制行内内容水平居中）起作用，因此标题仅水平居中、垂直方向仍按默认文档流顶部对齐。
✅ 正确做法是将 .head 设为弹性容器，并协同使用 justify-content 与 align-items：
.head {
background-color: #111111;
color: #1d8954;
filter: brightness(150%);
width: 100%;
height: 75vh;
margin: 0;
display: flex; /* ? 必须添加：启用 Flex 布局 */
justify-content: center; /* 水平居中（主轴） */
align-items: center; /* 垂直居中（交叉轴） */
}同时建议移除 .head-text 中冗余的 font-size: 5rem（非问题主因，但过大的字号可能引发溢出或响应式问题），并确保 HTML 结构闭合正确（原代码中
标签未正确闭合，应为
<div data-aos="fade-in" class="head"> <p class="head-text">Top Artists and Songs of 2023</p> </div>
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- align-items 仅作用于弹性子项在交叉轴上的对齐方式，对普通块级元素无效；
- 若需兼容老版本浏览器（如 IE10/11），注意 flex 的 vendor prefix（现代项目通常无需）；
- 避免在 flex 容器上同时滥用 margin: auto 或 position: absolute，易造成行为冲突；
- 替代方案：display: grid + place-items: center 同样简洁有效，语义更清晰。
总结：CSS 居中不是“加一行属性就完事”，而是理解布局模型的前提。align-items 是 Flex/Gird 的专属属性，脱离对应显示模式即失效。牢记「先设 display，再调对齐」这一原则，可规避 80% 的居中失效问题。
