本文详解为何 text-align: center 和 Flexbox 属性未生效——根本原因在于 HTML 中使用 id="titulo"，而 CSS 却错误地用类选择器 .titulo 定义样式，导致样式未被应用。
本文详解为何 `text-align: center` 和 flexbox 属性未生效——根本原因在于 html 中使用 `id="titulo"`，而 css 却错误地用类选择器 `.titulo` 定义样式，导致样式未被应用。
在你的 CodePen 示例中，标题 <section id="titulo"> 使用的是 ID 属性，但对应的 CSS 规则却写成了类选择器 .titulo：
.titulo { /* ❌ 错误：这是类选择器，匹配 <section class="titulo"> */
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}而 HTML 中实际是：
<section id="titulo"> <!-- ✅ 正确：使用的是 ID --> <h1>SCREAM</h1> </section>
因此，CSS 必须改用 ID 选择器 #titulo 才能正确匹配并应用样式：
/* ✅ 正确：ID 选择器与 HTML 中的 id="titulo" 对应 */
#titulo {
background-color: #ffffff;
text-align: center; /* 对内联/块级子元素（如 h1）生效 */
color: #000000;
padding: 50px;
display: flex; /* 启用 Flex 布局 */
justify-content: center; /* 水平居中（主轴） */
align-items: center; /* 垂直居中（交叉轴） */
min-height: 100vh; /* 可选：确保垂直居中有足够空间 */
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- text-align: center 本身已足以让 <h1> 水平居中（因 <h1> 是块级元素，默认占满父容器宽度），此时 display: flex + justify-content: center 属于冗余，除非你同时需要垂直居中；
- 若仅需水平居中，保留 text-align: center 并移除 Flex 相关声明即可，更简洁高效；
- 若需水平 + 垂直居中（例如全屏居中标题），则必须启用 display: flex，并建议添加 min-height: 100vh 确保容器有足够高度供 align-items: center 发挥作用；
- ID 选择器（#titulo）优先级高于类选择器（.titulo），且一一对应，不可重复使用于多个元素——若未来需复用该样式，建议改用类名并统一调整 HTML 和 CSS。
✅ 最终推荐精简写法（兼顾语义、性能与可维护性）：
#titulo {
background-color: #fff;
color: #000;
padding: 50px;
text-align: center;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}这样，<h1>SCREAM</h1> 将真正实现响应式、全屏级的水平与垂直居中，且代码清晰无冗余。
