Why Centering Elements in CSS Can Be Tricky

There are a whole lot of things that even the most experienced developers have to look up again and again. One of those things is how to center elements in CSS. This blog post summarizes the most common solutions and provides a place where you can always look it up.

Center text in a div

If you have text in it, how can you center that text? div

<div class="centered">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem minus alias repudiandae velit nobis, itaque, quam ratione facere rerum veniam nisi excepturi maiores suscipit obcaecati aperiam beatae voluptate molestias vero.
</div>

The simplest solution is text-align: center. It works like this:

.centered {
    text-align: center;
}

By the way, this also works if your text is embedded divin an <p>element:

<div class="centered">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem minus alias repudiandae velit nobis, itaque, quam ratione facere rerum veniam nisi excepturi maiores suscipit obcaecati aperiam beatae voluptate molestias vero.</p>
</div>

And even if you <div>have nested several s's:

<div class="centered">
    <div>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem minus alias repudiandae velit nobis, itaque, quam ratione facere rerum veniam nisi excepturi maiores suscipit obcaecati aperiam beatae voluptate molestias vero.</p>
    </div>
</div>

Center an image in a div

In principle, you could also center images by giving the parent a style. Only then everything becomes parent-centered, such as:divtext-align: centerdiv
If you only want to center yours and not the rest, you need a different approach.<img>

<div class="container">
    <img src="images/logo.png" alt="HCS Logo" class="centered-image">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt doloremque, voluptates maxime a dolorem eum dignissimos consequuntur quas amet modi atque, accusantium pariatur, id velit tempore quasi explicabo ab suscipit!</p>
</div>

In the CSS you can now adjust the style of the image like this:

.centered-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

This centers yours and leaves everything else as it is.<img>
Center a div in a div.

Next, let's look at the situation when we have a <div>within a,<div> and we want to center the child—but div not its contents.

<div class="parent">
    <div class="child">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aut eveniet veritatis quibusdam illum autem ab officiis rerum obcaecati placeat sit. Temporibus non vitae inventore dolore tempore saepe natus voluptatem velit.
    </div>
</div>

Let's make this a little more visual by div giving the two S's different background colors and adding some padding so you can actually see it.

I div also gave the child a width 200pxso that you can see the result better.

.parent {
    background-color: aquamarine;
    padding: 1rem;
}

.child {
    background-color: cadetblue;
    padding: 1rem;
    width: 200px;
}

Now we can use the same trick with margin to center the child:div

.parent {
    background-color: aquamarine;
    padding: 1rem;
}

.child {
    background-color: cadetblue;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
    width: 200px;
}

Centering Elements with Flexbox

If you're already using Flexbox, it can be an easier solution to use Flexbox for centering.

In Flexbox, you always have a parent container and a child element, to which you assign the Flexbox styles:

<div class="container">
    <div class="element">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aut eveniet veritatis quibusdam illum autem ab officiis rerum obcaecati placeat sit. Temporibus non vitae inventore dolore tempore saepe natus voluptatem velit.
    </div>
</div>

.container {
    display: flex;
    background-color: aquamarine;
    padding: 1rem;
}
.element {
    background-color: cadetblue;
    padding: 1rem;
    width: 200px;
}

To center it, let's use the style on the parent container:justify-content: center;

.container {
    display: flex;
    justify-content: center;
    background-color: aquamarine;
    padding: 1rem;
}

Centering a Div Vertically

If the parent container has a certain height, you can also center the child element vertically. How? With the property of Flexbox.align-items

This is our starting point:

<div class="container">
    <div class="element">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aut eveniet veritatis quibusdam illum autem ab officiis rerum obcaecati placeat sit. Temporibus non vitae inventore dolore tempore saepe natus voluptatem velit.
    </div>
</div>

.container {
    display: flex;
    justify-content: center;
    background-color: aquamarine;
    padding: 1rem;
    height: 300px;
}
.element {
    background-color: cadetblue;
    padding: 1rem;
    width: 200px;
}

The container has a height of . The child element is smaller, but pulled to the full height of the container, which looks like this:300px
But what we really want is for the child element to be as large as its contents, and to be centered both horizontally and vertically.

To achieve this, we set the property on the container, namely to .align-itemsalign-items: center;

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: aquamarine;
    padding: 1rem;
    height: 300px;
}
.element {
    background-color: cadetblue;
    padding: 1rem;
    width: 200px;
}

This now leads to the desired result: this is centered both horizontally and vertically! 🥳div

Other solutions for centering

There are definitely more ways to center elements with CSS. Here is a summary of the most important possibilities, but they would go beyond the scope of this article:

• Center elements with float

• Centering Elements with CSS Grid

• Center elements in the viewport.

• Centering with Tailwind CSS

There are many ways to center elements with CSS. This article has presented the most common solutions that you can use without a CSS framework. I hope this article has helped you—maybe it will even become a reference book for you on how to center elements in CSS! 😄

---

Be a part of over Success!

• Stay ahead of the curve with the latest tech trends, gadgets, and innovations! 🚀🔗Newsletter

• Follow me on Medium for more insights ⭐