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.

Value	Description
stretch	Items are stretched to fit the container (default)
center	Items are positioned at the center of the container
flex-start	Items are positioned at the beginning of the container
flex-end	Items are positioned at the end of the container
baseline	Items are positioned at the baseline of the container
initial	Sets this property to its default value
inherit	Inherits this property from its parent element

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>

---