通过为段落（）设置 margin: auto 并明确指定 width，可使其在父容器内水平居中，无需依赖文本对齐或弹性布局。

通过为段落（`

`）设置 `margin: auto` 并明确指定 `width`，可使其在父容器内水平居中，无需依赖文本对齐或弹性布局。

当为

元素设置固定宽度（如 width: 15ch）时，它会脱离默认的块级“撑满父容器”行为，变成一个具有明确尺寸的块级盒子。此时仅靠 text-align: center 无法居中该盒子本身——它只影响内部文字对齐，而非盒子自身的位置。

正确做法是：将 margin: auto 应用于

元素

。这会触发浏览器自动计算左右外边距，使元素在其包含块中水平居中（前提是元素具有明确的宽度且为块级）。

✅ 正确 CSS 示例：

div {
  margin: 0 auto;
  background: yellow;
  text-align: center; /* 对内部纯文本仍有辅助作用 */
  width: fit-content; /* 可选：避免 div 过宽；或设具体宽度如 300px */
}

p {
  margin: auto;   /* 关键：实现块级居中 */
  width: 15ch;    /* 指定宽度，ch 单位基于当前字体的 '0' 字符宽度 */
}

⚠️ 注意事项：

• margin: auto 在水平方向生效的前提是：元素为块级（默认即满足）、有明确的 width（不能是 auto），且父容器有足够空间；
• text-align: center 对

  本身居中无效，但若段落内含内联内容（如图片、），仍建议保留以确保内部对齐一致；

• ch 是相对单位，1ch ≈ 当前字体中字符 "0" 的宽度，适合按字符数控制宽度，响应性优于 px；
• 若需兼容老版本 IE（

总结：居中块级元素的核心在于“显式宽度 + 自动外边距”，而非文本对齐——这是理解 CSS 布局居中的关键分水岭。