JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="displayContainer centerFlex">
        <div id="firstObject" class="">
            <span class="topFlex">some text</span>
            <span class="centerFlex">some text</span>
            <span class="bottomFlex">some text</span>
            <span class="stretchFlex">some text</span>
        </div>
    </div>
    <div class="displayContainer centerPseudo">
        <div id="secondObject" class="centerPseudo">
            <span>some text</span>
        </div>
    </div>
</body>

CSS

.displayContainer {
    border: 1px dotted #000;
    display: block;
    height: 50%;
    width: 100%;
}
.bottomFlex {
    align-self: flex-end;
}
.centerFlex {
    align-items: center;
    display: flex;
    justify-content: center;
}
.stretchFlex {
    align-self: stretch;
}
.topFlex {
    align-self: flex-start;
}
.centerPseudo {
    display: inline-block;
    text-align: center;
}
.centerPseudo::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width: 0px;
}
#firstObject {
    background-color: red;
    display: flex;
    height: 100px;
    width: 300px;
}
#secondObject {
    background-color: yellow;
    height: 100px;
    width: 300px;
}
body {
    background-color: rgba(0,0,0,0.3);
    height: 100%;
    margin: 0;
    width: 100%;
}
html {
    height: 100%;
    width: 100%;
}