Best (and worst!) ways to center WITHOUT flex or grid

People like to make fun of how hard it is to center things with CSS, and while we have flex and grid which make it super duper easy these days. Sometimes when someone complains about it, then gets a reply of "it's easy with flexbox", they reply "but what if you can't use flexbox or grid?". It's a dumb reply, but it did get me thinking a little.

⌚ Timestamps
00:00 - Introduction
01:06 - The criteria
02:09 - Technique #1 - line-height
04:52 - Technique #2 - tables
06:58 - Technique #3 - position absolute v1
10:15 - Technique #4 - position absolute v2
12:30 - Technique #5 - padding (with custom properties)

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[asiimawepablo]

Kevin you have changed the way i look at css by going thru yr course conquering responsive layouts

[jacoblockwood]

I'm a really big fan of the `inset` solution! And it seems that browser support is good enough to use in production. 👍

[DylRicho]

8:16
If you need to support browsers that don't have support for transform, you can also use negative margins on the inner element equal to half the width and height. It works with percentages too.

[bi]

Woman: Tell Me Something Beautiful.
Kevin: You Are The CSS Of My HTML 😅

[matiasribero]

Great video! The solution I found to keep a text always centered on top of an image was in your "5 ways to vertically center with CSS" video from 2018. I tried for fun every other way you explain here, but I couldn't make it work. I'm glad I watched the older video first 😅.

What worked for me was:
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;

[katrinaaponte]

Kevin, your videos are the only reason I feel even slightly confident with CSS. You've helped me up my CSS game tenfold since I've started watching your videos. Thank you.

[dave]

So right about the old school opinion of centering items! I have a senior back end dev who was practically complaining when he learned about ‘place-items’ as if to say, “too little, too late, css 😤”

[wacpas]

A variant of Technique #3 was to have the inner positioned absolut, with top and left at 50% while having a margin-left of -50% of the inner element with and margin-top of -50% of the inner element height, however this needed a fixed height/width of the inner object to work but before we had transform with translate work across all browsers this was one of the ways I've used...

[marcusaurielius]

you gave us an authentic look at a specific side of [you] in this one. thanks. texture is very appreciated. sincerely, no joke. thanks for all the info too as well, of course.

[jammincoder]

Literally just yesterday I was doing research on ways to center elements... do you have access to my search history? XD
Another great video btw.

[ShawnRitch]

You had me with the inset and lost me at the calc ;P Such an easy, yet complicated, topic lol

[aisakataiga]

The third technique, I modified it a bit with the .inner-box:
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

And it worked, needn't care about the parent's css

[qmster]

Incredible t-shirt choice for this video's topic, bravo Kevin!

[claudiu]

I sort of disagree with position: absolute; being over display: table;/table-cell;

While I understand that the point of the video is to show how to center stuff, and in that context position:absolute; is better, if you are forced to create an entire layout without flex/grid, table-cell; would be a better option since with position:absolute; the element is removed from the normal document flow, and can create some big problems with the other elements in the layout.

Anyway, big fan of your channel, I learn a lot from your videos and I'm happy to see a channel focused on css be able to flourish.

[bushigi]

You just showed us so many ways to center the element which I would never thought of! Thank you Kevin.

[Akimb]

It felt like a pleasant history lesson 👍I did not know about table cell alignment and was happy that I learned something new. Thanks

[nelsonfrank]

i love watching your video because every time i watch, i learning something new and find myself laughing when you show some kind of cool css trick, Thank you kevin

[martings]

Kevin you are great, I keep recommending your videos to lots of people, and I really think you teach things in a different manner, teaching to think and do a deep dive into CSS. But please put Spanish I'm From Argentina and there are a lot of people who can't access your content because they don't know English.

[Languagist]

I was really curios to know how to center without flex or grid. Thank you Kevin!

[YasinNurRahmanSGHS]

this is very helpful to center div. i am new to css. #5 went above my head but i liked #1, #3 and #4. love ur work.