DEV Community

Dalibor Belic
Dalibor Belic

Posted on • Originally published at blog.daliborbelic.com on

3 ways to centre a div + life advice

A few years ago, when I was a beginner developer such a task, to centre a div, would be easy and hard at the same time. It's super comprehensible yet you're not sure how to do it (although you probably saw it many times while following a boot camp). And then when googling starts and we all know how it goes.

What I want you to know is that this is totally fine! Not knowing something is okay, no matter how simple (or hard) it may look. On the other, what needs to be stressed out is the ability to find the answer (it is also a skill, treat it that way). That is the key! Now, when I'm googling, I kinda feel where (or if) the answer lies on a certain page. You'll get there, keep it up!

Now, let's centre this DIV:

<section>
    <div class='centre'>
        test
    </div>
</section>

Enter fullscreen mode Exit fullscreen mode

The Traditional Approach

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

Enter fullscreen mode Exit fullscreen mode

And then flexbox came

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

Enter fullscreen mode Exit fullscreen mode

With Grid 🔥

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

Enter fullscreen mode Exit fullscreen mode

Till next time,
Dalibor

Top comments (13)

Collapse
 
afif profile image
Temani Afif

don't use the flexbox method that way: dev.to/afif/never-make-your-text-c...

Collapse
 
tilkinsc profile image
Cody Tilkins

For those who are wondering,

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

<section class="flex_center">
    <div>
        test
    </div>
    <div>
        test2
    </div>
</section>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
code_rabbi profile image
Emeka Orji

This is very true! I read the post.
But I still think; since you pointed out a problem in that post, you should have 'made available' a solution. Either by you or redirecting to a post that solves the problem

Collapse
 
afif profile image
Temani Afif

I already gave the solution "don't make text container flexbox container". I am not solving a problem, I am warning people about the wrong use of flexbox. If they don't do it, they will not have a problem

When your eyes are hurting because you are staying too long in front of a TV, a doctor will tell to stop watching TV for too long. He will not tell you "drink this and you can stay the whole day in front of the TV"

Collapse
 
inurfacejerks profile image
Mike

This conversation was somewhat insightful! I'm gonna read it again

Collapse
 
inurfacejerks profile image
Mike

I have a question! With the absolute positioning I've noticed that you can have the div perfectly centered, in that you can more directly control the size and the way it looks like day you add a background color to see you have a perfect square or rectangle, but using flexbox and grid the div then stretches like it intends to take up the full width of the screen. How do you control that when using flex and grid?

Collapse
 
daliboru profile image
Dalibor Belic

I think you should take a quick glance at some flexbox/grid tutorials on yt. You'll get the answer quickly. It's better than me explaining it through writing...

Collapse
 
inurfacejerks profile image
Mike

Ok, will do. Thx

Collapse
 
afif profile image
Temani Afif

it's not only a direction issue. Read my post and check the example I am using. The direction will not solve the problem of making a text container a flexbox container.

A lot of websites do this and a lot of them are wrong because a lot of tutorial are teaching things the bad way using flexbox like a magic tool when it's not suitable in many cases.

 
afif profile image
Temani Afif

micro-optimizing for every single use case even before you run into issue is not the best advice. --> sorry but I have to disagree here because this is not a micro-optimizating, it's a fundamental issue. When everywhere in the net, we see the same mistake that everyone do then we need to do something to counter this.

When a teacher is teaching young people some little wrong things, it may not look bad at first glance because it's not a big deal but when the children will grow, you will notice the mistake and it would be hard to recover.

Using Flexbox or CSS grid without understanding the fundamental is a big NO for me because you will write a ton of code and one day you will get surprised why things are broken and we will get lost within a lot of concept that you never learned before.

I have been answered more than 6000 questions in Stack Overflow and elsewhere so I have an idea about the mess that is happening

 
afif profile image
Temani Afif

it does and that's the problem, please check the post I wrote to understand what I mean.

Collapse
 
crocsx profile image
Federico Giacomini

For those who still struggle, this was my go to some years ago :

howtocenterincss.com

Collapse
 
daliboru profile image
Dalibor Belic

Cool!