如何将段落动态定位至居中标题的起始位置

嘿，这个需求我之前折腾过好一阵子，完全不用JS或者生硬的媒体断点就能搞定！咱们用CSS容器查询配合Sass混合宏就能完美实现，甚至能做到真正的响应式自适应，刚好匹配你要的770px及以下的屏幕需求。

核心思路 #

咱们要让标题和段落共享一个自适应参考容器：

• 当屏幕宽度≥770px时，容器居中且宽度固定为770px，标题在容器内居中，段落的最大宽度和容器一致，自然和标题的左边缘对齐；
• 当屏幕宽度<770px时，容器自动撑满屏幕，标题依然居中，段落也跟着撑满屏幕，和标题的左边缘（此时就是屏幕左边缘）保持对齐。

HTML结构（简洁明了） #

<div class="content-block">
  <h2 class="content-block__title">这是一个居中的标题，长短都能适配</h2>
  <div class="content-block__body">
    <p>这里是段落内容，需要和标题的左边缘对齐，不管屏幕宽度怎么变，哪怕缩到770px以下也能保持对齐。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>再来一段测试内容，确保所有段落都能正确对齐。Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>

Sass混合宏封装（复用性拉满） #

把整个对齐逻辑封装成混合宏，以后要改临界宽度或者复用直接调用就行：

@mixin aligned-centered-content($max-container-width: 770px) {
  // 基础容器样式：默认居中，最大宽度设为你要的临界值
  max-width: $max-container-width;
  margin: 0 auto;

  &__title {
    text-align: center;
    // 标题过长时自动换行，避免超出容器
    word-wrap: break-word;
  }

  &__body {
    // 段落最大宽度继承容器，自然和标题左边缘对齐
    max-width: 100%;
    // 小屏幕上给段落加左右内边距，避免文字贴边
    padding: 0 1rem;
  }

  // 容器查询：当父容器（屏幕）宽度小于临界值时，容器撑满屏幕
  @container (max-width: $max-container-width) {
    max-width: 100%;
  }

  // 兼容旧浏览器的降级方案（可选）
  @media (max-width: $max-container-width) {
    max-width: 100%;
  }
}

// 调用混合宏，直接应用到你的内容块
.content-block {
  @include aligned-centered-content();
}

为什么这个方案符合你的要求？ #

1. 无JS、无生硬断点：用容器查询替代固定媒体断点，完全基于容器宽度自适应，不是硬卡770px的屏幕宽度；
2. Sass混合宏封装：逻辑复用方便，改临界宽度只需要修改混合宏的参数；
3. 全屏幕适配：从超大屏到770px以下的小屏，都能保持标题居中、段落和标题左边缘对齐的效果；
4. HTML容器逻辑清晰：只用了一层容器包裹标题和段落，结构简洁易维护。

如果标题本身特别长，超过770px，word-wrap: break-word会让标题自动换行，依然保持居中，段落也会跟着自动适配宽度，完全不用担心溢出问题。

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