How to center with CSS?

Centering with CSS is often a real pain! You always end up not knowing how to do it, especially when you're a beginner.

So keep this article in your favorites to save yourself from searching the internet every time.

With CSS, we can center elements in several ways:

• with grids
• with flexbox
• with the position property
• with external margins
• with the text-align property

Centering with Grids

Add this code to the tag that groups the elements you want to center:

.items {
    display: grid;
    place-items: center;
}

Centering with Flexbox

We can also center using flexbox by grouping all elements to center in a parent tag (which we use as .items).

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

Centering with the position Property

Another option is to use the position property to have our element centered in the middle of its parent element.

.item {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right:
    transform: translate(-50%, -50%);
}

Centering with External Margins

Nothing could be simpler with this method: just use the margin property specifying an auto value.

.item {
    margin: 0 auto;
    width: 50%;
    display: block;
}

Centering with the text-align Property

Finally, we can center text using the text-align property that we all know.

.item {
    text-align: center;
}

Conclusion

Now, it's impossible to not know how to center with CSS!

Good to know

If you want to learn more about HTML and CSS, take a minute to check out our complete formation on HTML and CSS. ✨