如何在CSS中让Flexbox的中间项始终水平居中？

需求描述 #

将文本拆分为三个div：中间div包含高亮文本，首尾div分别包含高亮文本前后的剩余内容。首尾两个元素需带有文本截断类，且无论首尾文本量（包括无文本），高亮部分始终水平居中。

现有代码 #

CSS #

* {
    font-family: Arial;
}

div > div:first-child {
    direction: rtl;
}

HTML #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="d-flex">
    <div class="flex-fill text-nowrap text-end overflow-hidden text-truncate text-success">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sit amet magna in magna gravida vehicula. Curabitur bibendum justo non orci. Aenean fermentum risus id tortor.</div>
    <div class="flex-shrink-1 text-nowrap fw-bold text-danger px-1">Quisque porta.</div>
    <div class="flex-fill text-nowrap text-start text-truncate text-primary">Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Sed convallis magna eu sem. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Donec quis nibh at felis congue commodo. Mauris dictum facilisis augue. Phasellus faucibus molestie nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
</div>

<div class="d-flex">
    <div class="flex-fill text-nowrap text-end overflow-hidden text-truncate text-success">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sit amet magna in magna gravida vehicula. Curabitur bibendum justo non orci. Aenean fermentum risus id tortor.</div>
    <div class="flex-shrink-1 text-nowrap fw-bold text-danger px-1">Quisque porta.</div>
    <div class="flex-fill text-nowrap text-start text-truncate text-primary"></div>
</div>

<div class="d-flex">
    <div class="flex-fill text-nowrap text-end overflow-hidden text-truncate text-success">Lorem ipsum</div>
    <div class="flex-shrink-1 text-nowrap fw-bold text-danger px-1">dolor</div>
    <div class="flex-fill text-nowrap text-start text-truncate text-primary">sit amet, consectetuer adipiscing elit.</div>
</div>

<div class="d-flex">
    <div class="flex-fill text-nowrap text-end overflow-hidden text-truncate text-success"></div>
    <div class="flex-shrink-1 text-nowrap fw-bold text-danger px-1">Lorem ipsum dolor</div>
    <div class="flex-fill text-nowrap text-start text-truncate text-primary">sit amet, consectetuer adipiscing elit.</div>
</div>

解决方案 #

可以实现，核心是用Grid布局替代Flex布局，让左右两列强制平分剩余空间，中间列自适应内容，从而保证高亮部分始终居中。修改后的代码如下：

修改后的HTML（替换原有的.d-flex容器） #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<!-- 用grid布局替代d-flex -->
<div class="grid grid-cols-[1fr_auto_1fr]">
    <div class="text-nowrap text-end overflow-hidden text-truncate text-success">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sit amet magna in magna gravida vehicula. Curabitur bibendum justo non orci. Aenean fermentum risus id tortor.</div>
    <div class="text-nowrap fw-bold text-danger px-1">Quisque porta.</div>
    <div class="text-nowrap text-start text-truncate text-primary">Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Sed convallis magna eu sem. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Donec quis nibh at felis congue commodo. Mauris dictum facilisis augue. Phasellus faucibus molestie nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
</div>

<div class="grid grid-cols-[1fr_auto_1fr]">
    <div class="text-nowrap text-end overflow-hidden text-truncate text-success">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sit amet magna in magna gravida vehicula. Curabitur bibendum justo non orci. Aenean fermentum risus id tortor.</div>
    <div class="text-nowrap fw-bold text-danger px-1">Quisque porta.</div>
    <div class="text-nowrap text-start text-truncate text-primary"></div>
</div>

<div class="grid grid-cols-[1fr_auto_1fr]">
    <div class="text-nowrap text-end overflow-hidden text-truncate text-success">Lorem ipsum</div>
    <div class="text-nowrap fw-bold text-danger px-1">dolor</div>
    <div class="text-nowrap text-start text-truncate text-primary">sit amet, consectetuer adipiscing elit.</div>
</div>

<div class="grid grid-cols-[1fr_auto_1fr]">
    <div class="text-nowrap text-end overflow-hidden text-truncate text-success"></div>
    <div class="text-nowrap fw-bold text-danger px-1">Lorem ipsum dolor</div>
    <div class="text-nowrap text-start text-truncate text-primary">sit amet, consectetuer adipiscing elit.</div>
</div>

补充CSS（如果不用Tailwind类） #

如果不使用Tailwind的grid工具类，可自行给父容器添加以下CSS：

.grid-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
}

原理说明 #

• grid-template-columns: 1fr auto 1fr：左右两列各占1份剩余空间（强制平分），中间列宽度自适应内容。
• 保留原有的文本截断样式（text-nowrap、overflow-hidden、text-truncate），确保首尾文本过长时自动截断。
• 不管首尾是否有文本，左右两列的可用空间始终相等，中间高亮部分自然处于水平中心位置。

内容的提问来源于stack exchange，提问作者Qwerty-uiop