为何<body>设置的text-align未生效到嵌套的.content类元素？

核心原因 #

text-align: center仅会控制元素内部的*行内内容（文本、图片、行内块等）*对齐方式，不会让内部的块级子元素本身居中。
你给<body>设置的text-align: center能让标题文字居中，是因为未设置宽度的块级标题默认宽度撑满整个body，文字在标题内部居中；当你给.content这个块级元素设置width: 500px后，固定宽的块级元素默认会沿父元素左侧排列，此时你给.content加text-align: center仅能让.content内部的文字居中，无法让这个500px宽的盒子本身在页面中居中，所以看起来整体是左对齐的。

解决方案 #

给固定宽度的块级元素添加margin: 0 auto属性即可让它在父元素内水平居中，你的.content和带边框的标题都加这个属性，就能保证两者宽度一致、水平位置完全对齐。
修改后的.content样式如下：

.content {
  width: 500px;
  margin: 0 auto; /* 新增属性，左右外边距自动计算实现居中 */
  /* 若需要正文内部文字左对齐，不需要额外加text-align: center，保持默认即可 */
}

如果你的标题也设置了固定宽度，记得给标题也加margin: 0 auto，就能实现标题和正文完全对齐的效果。

完整可运行示例 #

<!DOCTYPE html>
<html>
<head>
<style>
body {
  /* 这个属性可以保留，用来控制行内元素居中 */
  text-align: center;
  margin: 0;
  padding: 20px;
}
.page-title {
  width: 500px;
  border: 2px solid #333; /* 你需要的标题边框 */
  margin: 0 auto 16px auto; /* 上下外边距可自定义，左右auto实现居中 */
  padding: 10px;
}
.content {
  width: 500px;
  margin: 0 auto;
  text-align: left; /* 正文内部文字默认左对齐，需要居中可改为center */
}
</style>
</head>
<body>
  <h1 class="page-title">带边框的页面标题</h1>
  <div class="content">
    这里是正文内容，宽度和标题边框宽度完全一致，正好位于标题正下方。你可以随意添加内容，盒子的水平位置不会偏移。
  </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Worker1432