JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex_container">
     <div>Top</div>
    <div>Center Me</div>
    <div>And<br />Center<br />Me<br />Too</div>
    <div>Bottom</div>
</div>

CSS

.flex_container {
    display: flex;
    align-items: center; /* Center Vertically */
    justify-content: center; /* Center Horizontally */
    border: 1px solid #000;
    height: 300px;
}.flex_container > div {
    padding: 10px;
    background-color: #eee;
}.flex_container > div:first-of-type {
     align-self: flex-start;
}.flex_container > div:last-of-type {
    align-self: flex-end;
}