How to center the middle item of a flexbox in CSS? - css

Question

I'm trying to display text divided into 3 divs - the middle one contains the highlighted part of the text and the first and last divs contain the rest of the text before and after the highlighted part.
Both first and last flex items have classes to trunctate the text. This is to provide only the necessary context for the user.
I want the highlighted part to be always horizontally centered to the middle of the flexbox, regardles of the amount of text (including no text) in any of the flex items.
Here is what I currently have:
* {
font-family: Arial;
}
div > div:first-child {
direction: rtl;
}
<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>
Is it possible to make the the item in the middle always centered?

Answer 1

I managed to get the result that I am happy with using flex: 1.
* {
font-family: Arial;
}
div > div:first-child {
direction: rtl;
}
div > div:first-child, div > div:last-child {
flex: 1 !important;
}
<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>