How to Center an Element with CSS

Centering an element with CSS can sometimes be tricky, but with modern CSS techniques, it has become much easier. In this blog post, I will guide you through the different ways to center elements using CSS, both horizontally and vertically.

Center Horizontally

Text

To center text horizontally, simply set the text-align property to center:

p {
 text-align: center;
}

Blocks

For non-text elements, the preferred way to center them horizontally is by using Flexbox:

#mysection {
 display: flex;
 justify-content: center;
}

This will center any element inside #mysection horizontally.

[image: flexbox-horizontal-center.png]

Alternatively, if you prefer not to use Flexbox, you can center non-text elements by applying an automatic margin to the left and right, and setting the width of the element:

section {
 margin: 0 auto;
 width: 50%;
}

The margin: 0 auto; shorthand is equivalent to:

section {
 margin-top: 0;
 margin-bottom: 0;
 margin-left: auto;
 margin-right: auto;
}

Just remember to set the item to display: block if it’s an inline element.

Center Vertically

Centering an element vertically has traditionally been more challenging. However, with Flexbox, it has become much simpler:

#mysection {
 display: flex;
 align-items: center;
}

This will vertically center any element inside #mysection.

[image: flexbox-vertical-center.png]

Center Both Vertically and Horizontally

You can combine Flexbox techniques to center an element both vertically and horizontally:

#mysection {
 display: flex;
 align-items: center;
 justify-content: center;
}

This will completely center an element in the page, both vertically and horizontally.

[image: flexbox-center.png]

You can achieve the same result using CSS Grid:

body {
 display: grid;
 place-items: center;
 height: 100vh;
}

I hope this guide has helped you understand how to center elements with CSS. With modern techniques like Flexbox and CSS Grid, centering elements has become much more accessible. Give them a try and see how they can simplify your CSS centering needs.