如何正确使用 CSS 选择器实现标题居中对齐

本文详解为何 text-align: center 和 Flexbox 属性未生效——根本原因在于 HTML 中使用 id="titulo"，而 CSS 却错误地用类选择器 .titulo 定义样式，导致样式未被应用。

本文详解为何 `text-align: center` 和 flexbox 属性未生效——根本原因在于 html 中使用 `id="titulo"`，而 css 却错误地用类选择器 `.titulo` 定义样式，导致样式未被应用。

在你的 CodePen 示例中，标题

使用的是 ID 属性，但对应的 CSS 规则却写成了类选择器 .titulo：

.titulo { /* ❌ 错误：这是类选择器，匹配 <section class="titulo"> */
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}</section>

而 HTML 中实际是：

<section id="titulo"><!-- ✅ 正确：使用的是 ID --><h1>SCREAM</h1> 
</section>

因此，CSS 必须改用 ID 选择器 #titulo 才能正确匹配并应用样式：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

/* ✅ 正确：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 本身已足以让
水平居中（因
是块级元素，默认占满父容器宽度），此时 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;
}

这样，