The align-items property specifies the vertical alignment for items inside the flex container. The following has three divs aligned centered on the horizontal axis.

<div id="box">
    <div style="height: 50px;"></div>
    <div style="height: 100px;"></div>
    <div style="height: 150px;"></div>
</div>

#box {
    width: 300px;
    height: 300px;
    border: #bababa solid thin;
    display: flex;
    align-items: center;
}
#box div {
    flex: 1;
    border: red solid thin;
    display: flex;
}

Default value	stretch
Inherited values	no
Can it be animated?	no

These are the allowed values.

The HTML element can also be styled using JavaScript and the element’s id.

document.getElementById('box').style.alignItems = 'center';

<button onclick='my_function()'>Click Here</button>

<script>
function my_function() {
    document.getElementById('box').style.alignItems = 'center';
}
</script>

---