On a project I have four absolutely positioned elements on a page that sit inside an absolutely positioned container (the latter in order to align them relative to the viewport’s bottom, while more content will follow below the viewport). The four elements are next to each other and do not overlap.
Is there a way to (dynamically) center the four elements inside their absolutely positioned parent? I know it sounds weird, since absolute positioning means exactly no automatic placement. Dynamically would mean that responsively the elements change both size and position at a certain breakpoint, but should still be centered horizontally in the viewport at all times.
I could think of a solution like this with an additional inner div, but didn’t get my head around to actually solving the puzzle, since I don’t know a good way for the inner div to grab the total width of its four absolutely positioned child elements:
<div class="myAbsoluteContainer">
<div class"myInnerDivForCentering">
<div class="myAbsoluteChildElement" id="child1"></div>
<div class="myAbsoluteChildElement" id="child2"></div>
<div class="myAbsoluteChildElement" id="child3"></div>
<div class="myAbsoluteChildElement" id="child4"></div>
</div>
</div>