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>
The Traditional Approach
.centre {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
And then flexbox came
.centre {
display: flex;
justify-content: center;
align-items: center;
}
With Grid 🔥
.centre {
display: grid;
place-items: center;
}
Till next time,
Dalibor
Top comments (13)
don't use the flexbox method that way: dev.to/afif/never-make-your-text-c...
For those who are wondering,
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
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"
This conversation was somewhat insightful! I'm gonna read it again
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?
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...
Ok, will do. Thx
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.
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
it does and that's the problem, please check the post I wrote to understand what I mean.
For those who still struggle, this was my go to some years ago :
howtocenterincss.com
Cool!