Hey there, is there a way I can achieve this specific layout without relying on position: absolute? Flexbox would be the preferred method. The main goal here is to have the middle element horizontally centered within its parent element, regardless of other elements present.
I am currently using the following CSS for the middle element (as it needs to be in the middle of the window):
position: absolute;
left: 50%;
transform: translateX(-50%);
However, with this approach, the parent does not adjust to the height of the middle element, making it less than ideal for my case.
Note: I did attempt to use this as well:
display: flex;
justify-content: space-between;
align-items: center;
But unfortunately, it did not yield the desired outcome (the line should split the first two middle blocks exactly in half):
#container {
display: flex;
justify-content: space-between;
align-items: center;
border-style: solid;
border-color: black;
margin: 4px;
padding: 4px;
}
#block {
background-color: red;
height: 40px;
}
#middle-line {
border: none;
border-left: dashed;
position: absolute;
height: 100%;
left: 50%;
width: 1px;
}<html>
<body>
<hr id="middle-line">
<div id="container">
<div id="block" style="width: 120px"></div>
<div id="block" style="width: 40px"></div>
<div id="block" style="width: 40px"></div>
</div>
<div id="container">
<div id="block" style="width: 40px"></div>
<div id="block" style="width: 40px"></div>
<div id="block" style="width: 120px"></div>
</div>
<div id="container">
<div id="block" style="width: 40px"></div>
<div id="block" style="width: 40px"></div>
<div id="block" style="width: 40px"></div>
</div>
<div id="container">
<div id="block" style="width: 120px"></div>
<div id="block" style="width: 40px"></div>
<div id="block" style="width: 120px"></div>
</div>
</body>
</html>