The align-self property specifies the alignment for the specific item inside a flexible container. The following has three divs inside a box. The blue div is given its own alignment using align-self.

<div id="box">
    <div style="background-color:red;">Red box</div>
    <div style="background-color:blue;" id="blue">Blue box</div>
    <div style="background-color:green;">Green box</div>
</div>

#box {
    width: 100%;
    height: 300px;
    border: #bababa solid thin;
    display: flex;
    align-items: flex-start;
}
#box div {
    flex: 1;
    color: #ffffff;
}
#blue {
    align-self: center;
}

Default value	auto
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('blue').style.alignSelf = 'center';

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

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

---