Why does align-items center not center my flex items horizontally?
Quick answer
align-items centers flex items on the cross axis, not automatically from left to right. With the usual flex-direction: row, the main axis is horizontal, so use justify-content: center for horizontal centering and align-items: center for vertical centering. With flex-direction: column, those axis directions swap, so align-items: center centers items horizontally. [S1]
The question, the details, the next step.
I have a flex container with align-items: center, but my items are still lined up on the left. Why doesn’t that center them horizontally?
Because align-items centers along the flex container’s cross axis, and that is not always horizontal. The main axis follows flex-direction: with row it runs horizontally, while the cross axis runs vertically. So in a row layout, align-items: center centers items vertically; to center them horizontally, use justify-content: center. [S1]
.row {
display: flex;
flex-direction: row;
justify-content: center; /* horizontal */
align-items: center; /* vertical */
}How do I tell which direction is the cross axis in my own layout, especially if I’m using a column?
Start with the container’s flex-direction, then identify the main axis. The cross axis is perpendicular to it. In a column layout, the main axis is vertical and the cross axis is horizontal. That means align-items: center centers items horizontally in a column; justify-content: center centers them vertically. [S1]
.column {
display: flex;
flex-direction: column;
align-items: center; /* horizontal */
justify-content: center; /* vertical */
}Can you give me a quick axis reference and show how to adapt this if I change row to column?
Use this reference: row → main axis horizontal, cross axis vertical; column → main axis vertical, cross axis horizontal. justify-content controls the main axis, and align-items controls the cross axis. [S1]
For a horizontal row, center left-to-right with justify-content: center. If you change the direction to column, horizontal centering moves to align-items: center. For vertical centering, the choice switches the other way. [S1]
.row {
display: flex;
flex-direction: row;
justify-content: center; /* horizontal */
align-items: center; /* vertical */
}
.column {
display: flex;
flex-direction: column;
align-items: center; /* horizontal */
justify-content: center; /* vertical */
}These rules identify which axis each property controls; they do not establish how much room your particular layout has to display the centering.
I changed the property, but I’m still unsure whether I’ve picked the right one. What should I check before changing more CSS?
Check the flex container itself, rather than guessing from the word “center.” Confirm that the element has display: flex, read its flex-direction, decide whether your target is horizontal or vertical, then use the property controlling that axis. If you are following an existing stylesheet, check whether another rule sets flex-direction differently than you expect. The axis rule applies to flex items within their flex container; the examples do not diagnose unrelated layout rules or guarantee a particular visual result in every page. [S1]
A practical checklist
Find the element that is the flex container and confirm it uses
display: flex.Read its
flex-direction:roworcolumn.Name the direction you want to center: horizontal or vertical.
Use
justify-contentfor the main axis andalign-itemsfor the cross axis.Recheck the result after changing
flex-direction, because the axis directions change.
A few more useful answers
In a row layout, which property centers items horizontally?
justify-content: center centers along the horizontal main axis when flex-direction: row. [S1]
Does `align-items: center` ever center items horizontally?
Yes. In a column layout, the cross axis is horizontal, so align-items: center centers along it. [S1]
What is the quickest way to remember the difference?
Find the main axis from flex-direction: justify-content controls that axis, and align-items controls the perpendicular cross axis. [S1]
Sources
References used for this guide.
- [S1] Basic concepts of flexbox - CSS | MDN developer.mozilla.org · Checked