CSS align-self Property

Center the alignments for one of the items inside a flexible element:

#myBlueDiv {
align-self: center;
}

More "Try it Yourself" examples below.

Definition and Usage

The align-self property specifies the alignment in the block direction for the selected item inside a flexbox or grid container.

For pages in English, block direction is downward and inline direction is left to right.

Tip: To align a grid item in the inline direction instead of the block direction, use justify-self or justify-items properties.

Note: The align-self property overrides the grid or flexible container's align-items property.

Default value:	auto
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.alignSelf="center" Try it

The numbers in the table specify the first browser version that fully supports the property.

Property
align-self	57.0	16.0	52.0	10.1	44.0

Value	Description	Play it
auto	Default. The element inherits its parent container's align-items property, or "stretch" if it has no parent container	Demo ❯
stretch	The element is positioned to fit the container	Demo ❯
center	The element is positioned at the center of the container	Demo ❯
flex-start	The element is positioned at the beginning of the container	Demo ❯
flex-end	The element is positioned at the end of the container	Demo ❯
baseline	The element is positioned at the baseline of the container	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit