- Instant help with your CSS coding problems

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 .

 

Share "How to center content within an element?"
Tags:
centering content, vertical center, horizontal center, flex, justify content
Technical term:
Center content within an element