如何实现副标题与居中主文本动态左对齐？纯CSS方案问询

问题说明 #

我了解到设置文本居中时，包裹元素会尽可能扩展宽度，以保证文本真正居中及换行、对齐的正确性。但我需要让副标题与居中主文本的左侧对齐（曾用固定margin模拟该效果，但想要动态适配的方法），希望仅通过纯CSS解决，避免使用JavaScript。

原代码 #

CSS

* {
    outline: 1px solid red;
}

.contain {
    margin: 0 auto;
    max-width: 350px;
}

.wrap {
    margin: 0 auto;
    padding: 80px 0;
}

.content {
    background: #ff000030;
    font-size: 32px;
    position: relative;
    text-align: center;
    width: fit-content;
}

.sub {
    /* margin-left:30px; */
    position: absolute;
    top: 0;
    transform: translateY(-100%);
}

HTML

<div class="contain">
    <div class="wrap">
        <div class="content">
            Lorem ipsum dolor sit amet.
            <div class="sub">test</div>
        </div>
    </div>
</div>

解决方案1：基于绝对定位的动态对齐 #

利用.content的position: relative特性，给副标题添加left: 0，使其相对于主文本的包裹容器左边界对齐，无需固定margin：

修改后的CSS（仅改动.sub）

.sub {
    position: absolute;
    top: 0;
    left: 0; /* 动态对齐主文本左边缘 */
    transform: translateY(-100%);
}

原理：.content设置了width: fit-content，其宽度会完全贴合主文本的实际宽度，副标题通过left: 0锚定容器左边界，自然与主文本左侧对齐，无论主文本内容或宽度变化都能自适应。

解决方案2：基于Grid布局的语义化方案 #

如果不想使用绝对定位，可以用Grid布局实现更语义化的对齐效果，同时保持动态适配：

修改后的CSS

* {
    outline: 1px solid red;
}

.contain {
    margin: 0 auto;
    max-width: 350px;
}

.wrap {
    margin: 0 auto;
    padding: 80px 0;
}

.content {
    background: #ff000030;
    font-size: 32px;
    display: grid;
    justify-items: center; /* 让主文本居中 */
    width: fit-content;
    margin: 0 auto; /* 让容器在父级居中 */
}

.sub {
    justify-self: start; /* 让副标题左对齐 */
    margin-bottom: 8px; /* 调整与主文本的间距 */
}

修改后的HTML（调整副标题位置）

<div class="contain">
    <div class="wrap">
        <div class="content">
            <div class="sub">test</div>
            Lorem ipsum dolor sit amet.
        </div>
    </div>
</div>

原理：通过Grid布局的justify-items: center让主文本保持居中，同时用justify-self: start单独控制副标题左对齐，容器width: fit-content确保宽度贴合主文本，实现动态适配。

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