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.

Value	Description
auto	The element inherits its parent container's align-items property, or "stretch" if it has no parent container (default)
stretch	The element is positioned to fit the container
center	The element is positioned at the center of the container
flex-start	The element is positioned at the beginning of the container
flex-end	The element is positioned at the end of the container
baseline	The element is 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('blue').style.alignSelf = 'center';

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

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

---