使用 text-align: center 显式设置段落文本对齐方式，可解决换行后文字左偏及响应式下居中偏移问题。

使用 `text-align: center` 显式设置段落文本对齐方式，可解决换行后文字左偏及响应式下居中偏移问题。

在 CSS Grid 布局中，place-items: center 仅控制子元素（即 <h1> 和 <p> 标签）在容器内的整体位置，它让每个 <p> 元素作为一个块级盒子水平垂直居中于网格单元内，但并不影响段落内部的文字排版。因此，当 <p> 内含 <br> 换行时，第二行文字会默认按浏览器默认的 text-align: start（通常为左对齐）渲染；同样，在视口变窄时，若未声明文本对齐方式，段落内容仍会随宽度收缩而向左“挤”，而非整体居中换行。

✅ 正确解法是为段落添加显式的文本对齐声明：

.about-div {
  display: grid;
  place-items: center;
  margin-top: 7.5rem;
  margin-left: 5rem;
  margin-right: 5rem;
}

.about-div h1 {
  margin-bottom: 1rem;
  text-align: center; /* 推荐同时设置标题对齐，保持一致性 */
}

.about-div p {
  margin-bottom: 1rem;
  text-align: center; /* ✅ 关键修复：强制段落内所有行居中对齐 */
}

⚠️ 注意事项：

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• 不要依赖 place-items: center 替代 text-align —— 前者作用于块级子元素定位，后者作用于行内内容排版，二者职责不同；
• 若需更强的响应式控制，可配合 max-width 与 margin: 0 auto 防止宽屏下文本过宽失衡，例如：

  .about-div p {
    max-width: 60ch; /* 推荐每行约 45–75 字符，提升可读性 */
    margin: 0.5rem auto 1rem;
    text-align: center;
  }

• 避免滥用 <br> 实现段落分隔；语义化做法应使用多个 <p> 标签，或通过 ::first-line 等伪元素定制首行样式。

至此，无论是否含 <br>、窗口如何缩放，所有文本行均稳定居中，布局清晰可控。

立即学习“前端免费学习笔记（深入）”；