CSS align-items Property
The align-items property aligns the flex items vertically (on the cross-axis).
This property can have one of the following values:
- normal (default)
- stretch
- center
- flex-start
- flex-end
- baseline
centerflex-startflex-endstretchCSS align-content Property
The align-content property aligns the flex lines. It only has effect when flex items wrap onto multiple lines.
This property can have one of the following values:
- stretch (default)
- center
- flex-start
- flex-end
- space-between
- space-around
- space-evenly
centerspace-betweenTrue Centering With Flexbox
The following example shows how to solve a common style problem: true centering.
To achieve true centering, set both the justify-content and the align-items properties to center for the flex container, and the flex item will be perfectly centered both horizontally and vertically:
Example
Formatted code
.flex-container {
display: flex;
height: 400px;
justify-content: center;
align-items: center;
}Live preview