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

Discussion (18)

Collapse
afif profile image
Temani Afif

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

Collapse
jaisharx profile image
jai-sharma

Lot of big websites actually do this. I don't think there should be some hard and fast rule to never use flex on a text container.

When there is the problem of adding more children to the container and all of sudden they are in a row we can just switch flex-direction to column.

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.

Thread Thread
jaisharx profile image
jai-sharma

wait, what so adding display flex to a text based html element does not make it a flex container??

Thread Thread
afif profile image
Temani Afif

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

Thread Thread
jaisharx profile image
jai-sharma

hey I did go through you post. I'm saying production code can't always be perfect, and switching to a higher level container or adding flex-direction column later when needed would not require like ton of refactoring. It's okay to settle down to solutions that work at the moment and when things eventually break, finding a fix. Given the fatigue in javascript land, micro-optimizing for every single use case even before you run into issue is not the best advice.

Thread Thread
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

Thread Thread
jaisharx profile image
jai-sharma

you make it seem much more of a issue than it really is. imagine I have a text that is likely not to be changed and I center it with flex what are the downsides? even if the text container might gain new children later on, is adding a flex-direction column not a solution? or simply just moving to a higher level container. I don't see why this should be a hard and fast rule of never ever to use flex on text container. It's not like the css specs says so. I say if it works, it's fine. I would love if everyone just shipped perfect production code. But that's not how things work.

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
emekaorji profile image
EmekaOrji

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 Author

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
crocsx profile image
Crocsx

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

howtocenterincss.com

Collapse
daliboru profile image
Dalibor Belic Author

Cool!