Center content within an element

.centered-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

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 .