JSFiddle - React, Tailwind, and code Playground

HTML

<div class="myAbsoluteContainer">
    <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>

CSS

/* Rules that are needed */
.myAbsoluteContainer {
    text-align: center; /* centers the elements horizontally */
}
.myAbsoluteChildElement {
    display: inline-block;
    vertical-align: middle; /* Centers the elements vertically */
}

/* Demo styling */
.myAbsoluteContainer {
    border: 1px solid red;
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
}

.myAbsoluteChildElement {
    border: 1px solid blue;
    width: 50px;
    height: 50px;
    margin: 20px;
}

#child2 {
    height: 40px;
    width: 20px;
}
#child4 {
    height: 30px;
    width: 80px
}