Center content within an element
Question:
How to center content within an element? Answer:
.centered-container {
display: flex;
justify-content: center;
align-items: center;
}
Description:
The CSS justify-content
property defines how the browser distributes space between and around content items along the main-axis of a flex
container, and the inline axis of a grid
container.
If set to center
, then the items are packed flush to each other toward the center of the alignment container along the main axis.
Note: The main axis is horizontal in case of flex-direction: row
and vertical in case of flex-direction: column
.
Reference:
justify-content reference
Share "How to center content within an element?"
Related snippets:
Tags:
centering content, vertical center, horizontal center, flex, justify content Technical term:
Center content within an element