How to center the middle item in a flex row? [duplicate] - html

Question

This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Keep the middle item centered when side items have different widths
(12 answers)
Closed 4 years ago.
What I want as a result:
I have three elements in a container that is a display: flex I want the left item to be aligned to the left, and the right item to the right. With the center item aligned in the center.
space-between is not the fix. It is not the solution I am looking for. This is because the elements are differing widths. Even with differing widths, I still want the middle element to be centered.
This could be fixed with a wrapper. and then put a flex: 1 on the wrappers, then within those wrappers, have the elements themselves. Again, this is not the fix I am looking for. I cannot use wrappers in my situation.
.parentContainer {
display: flex;
justify-content: center;
align-items: center;
}
.parentContainer > *{
background: red;
text-align: center;
}
<div class="parentContainer">
<div class="left">small</div>
<div class="middle">medium element here</div>
<div class="right">longer element is here too</div>
</div>

Answer 1

The primary way to achieve this layout – because it's clean and valid – is with flex: 1 on the items. That method is explained in the following post, but is also ruled out in this question.
Keep the middle item centered when side items have different widths
An alternative method involves CSS absolute positioning:
.parentContainer {
display: flex;
justify-content: space-between;
position: relative;
}
.middle {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
/* non-essential decorative styles */
.parentContainer > * { background: orange; text-align: center; padding: 5px; }
p { text-align: center;}
p > span { background-color: aqua; padding: 5px; }
P > span:first-child { font-size: 1.5em; }
<div class="parentContainer">
<div class="left">small</div>
<div class="middle">medium element here</div>
<div class="right">longer element is here too</div>
</div>
<p>
<span>↑</span><br>
<span>true center</span>
</p>
This method is explained in the following posts:
Methods for Aligning Flex Items along the Main Axis (see Box #71)
Element will not stay centered, especially when re-sizing screen

Answer 2

I think you can use a different approach. This is my suggestion.
.parentContainer {
display: table;
width: 100%;
background: lightblue;
border-collapse: collapse;
}
.parentContainer > div {
display: table-cell;
width: 33%;
}
.parentContainer > div:nth-child(1) {
text-align: left;
}
.parentContainer > div:nth-child(2) {
text-align: center;
}
.parentContainer > div:nth-child(3) {
text-align: right;
}
<div class="parentContainer">
<div>small</div>
<div>medium element here</div>
<div>longer element is here too</div>
</div>