align-items: center 无效通常是因为父容器未启用 Flex 布局（缺少 display: flex），本文详解如何正确使用 Flex 实现内容垂直+水平居中，并附可运行代码与关键注意事项。
css `align-items: center` 无效通常是因为父容器未启用 flex 布局（缺少 `display: flex`），本文详解如何正确使用 flex 实现内容垂直+水平居中，并附可运行代码与关键注意事项。
在 CSS 中，align-items: center 并非“万能居中属性”——它仅对Flex 容器（flex container） 生效，且只控制交叉轴（cross axis）上的对齐方式。若父元素未声明 display: flex（或 display: inline-flex），该属性将被完全忽略，这也是本例中绿色标题始终无法垂直居中的根本原因。
要实现真正的居中效果（水平 + 垂直），需同时设置：
- display: flex：将 .head 变为弹性容器；
- justify-content: center：沿主轴（默认为水平方向）居中；
- align-items: center：沿交叉轴（默认为垂直方向）居中。
以下是修正后的完整代码示例：
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300&display=swap');
body {
background-color: #212121;
font-family: 'M PLUS Rounded 1c', sans-serif;
margin: 0;
}
.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;
margin: 0;
/* 推荐添加：避免字体渲染差异导致微偏移 */
line-height: 1;
}
<div data-aos="fade-in" class="head"> <p class="head-text">Top Artists and Songs of 2023</p> </div>
⚠️ 注意事项：
-
HTML 标签闭合：原代码中
标签未正确闭合（写成了
而非
），虽部分浏览器会自动修复，但易引发布局异常，务必规范书写； - line-height 控制：大字号文本在 Flex 居中时可能因行高计算偏差产生像素级偏移，显式设置 line-height: 1 可提升精度；
- 替代方案：若不希望使用 Flex，也可通过 display: grid + place-items: center 实现等效效果，语义更简洁；
- 调试技巧：在浏览器开发者工具中检查 .head 元素的 computed styles，确认 display 是否为 flex，并观察 align-items 是否处于 active 状态。
掌握 Flex 布局的前提是理解其作用域——align-items、justify-content 等属性仅在 Flex 或 Grid 容器内生效。养成“先设 display，再调对齐”的开发习惯，可避免绝大多数居中失效问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
