通过为段落（）设置 margin: auto 并明确指定宽度（如 15ch），可实现其在父 div 中真正水平居中，避免因设置宽度后脱离文档流默认行为导致的左对齐问题。

通过为段落（`

`）设置 `margin: auto` 并明确指定宽度（如 `15ch`），可实现其在父 `div` 中真正水平居中，避免因设置宽度后脱离文档流默认行为导致的左对齐问题。

当为块级元素（如

）显式设置 width 时，它将不再默认占满父容器宽度，此时仅靠父级的 text-align: center 无法影响块级子元素的定位——该样式仅对内联内容（如文字、）生效。正确做法是让

自身成为可居中的块级盒：为其添加 margin-left: auto; margin-right: auto;（简写为 margin: auto），配合明确的 width，浏览器即可根据剩余空间自动分配左右外边距，从而实现水平居中。

以下是完整、可靠的实现代码：

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

p {
  margin: auto;     /* 关键：触发块级居中 */
  width: 15ch;      /* 指定精确宽度（基于字符“0”的等宽字体度量） */
  text-align: center; /* 保持段落内文字居中 */
}

<div>
  <p>This 1 sentence paragraph should be centered.</p>
</div>

⚠️ 注意事项：

• margin: auto 在块级元素上生效的前提是其 width 为确定值（非 auto 或 100%）；若未设宽度，auto 外边距将不起居中作用；
• ch 单位以当前字体中“0”字符的宽度为基准，适合对齐等宽文本场景，若需更稳定控制，也可使用 em、rem 或 px；
• 父容器无需额外设置 display: flex 或 position，本方案兼容所有现代浏览器及 IE9+；
• 若后续需响应式适配，可结合媒体查询动态调整 width 或改用 max-width + margin: auto 组合。

总结：居中块级元素的核心逻辑是「限制宽度 + 自动外边距」，而非依赖文本对齐——这是 CSS 布局中必须厘清的基础概念。