通过为段落（<p>）设置 margin: auto 并明确指定宽度（如 15ch），可实现其在父 div 中真正水平居中，避免因设置宽度后脱离文档流默认行为导致的左对齐问题。
通过为段落（`
`）设置 `margin: auto` 并明确指定宽度（如 `15ch`），可实现其在父 `div` 中真正水平居中，避免因设置宽度后脱离文档流默认行为导致的左对齐问题。
当为块级元素（如 <p>）显式设置 width 时，它将不再默认占满父容器宽度，此时仅靠父级的 text-align: center 无法影响块级子元素的定位——该样式仅对内联内容（如文字、<span>）生效。正确做法是让 <p> 自身成为可居中的块级盒：为其添加 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 布局中必须厘清的基础概念。
