本文详解为何 text-align: center 和 Flexbox 属性未生效——根本原因在于 CSS 选择器类型错误：HTML 中使用了 id="titulo"，但 CSS 却用 .titulo（类选择器）匹配，导致样式完全未应用。
本文详解为何 `text-align: center` 和 flexbox 属性未生效——根本原因在于 css 选择器类型错误：html 中使用了 `id="titulo"`，但 css 却用 `.titulo`（类选择器）匹配，导致样式完全未应用。
在实际开发中，一个看似微小的选择器错误（如混淆 . 类选择器与 # ID 选择器）会导致整段样式失效，而开发者往往因过度聚焦于布局属性（如 justify-content 或 text-align）而忽略这一基础问题。
你的 HTML 结构中定义的是：
<section id="titulo"><h1>SCREAM</h1> </section>
这表示该元素具有 ID 属性 titulo，而非 class="titulo"。因此，CSS 必须使用 ID 选择器 #titulo 才能正确匹配并应用样式。
✅ 正确写法（修改 CSS）：
/* 将 .titulo 改为 #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 本身已足以使
水平居中（因
默认为块级元素，且 text-align 控制其行内内容对齐），无需额外 Flexbox；
- 但若你同时希望垂直居中（例如标题在页面中央而非仅顶部区域），则 display: flex + align-items: center 是简洁可靠的方案；
- justify-content 和 align-items 仅在 display: flex 或 display: grid 下生效；单独设置无效；
- ID 选择器（#titulo）优先级高于类选择器（.titulo），但更重要的是——不匹配就无任何效果。
? 额外建议（提升健壮性）：
#titulo h1 {
margin: 0; /* 移除浏览器默认 h1 外边距，避免视觉偏移 */
font-size: 4rem;
font-weight: 900;
}
总结：样式失效的首要排查点永远是「选择器是否真正匹配目标元素」。先检查 HTML 的 id/class 属性与 CSS 选择器是否严格一致，再优化布局逻辑——这是高效调试 CSS 的关键习惯。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
