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

despite it being easy to center something with css for probably a decade now people still make jokes about it or still complain about how hard it is to center a div you'll see replies of people going well just use flexbox or grid and you know they're showing examples and trying to be helpful and then you get the reply of well what if you can't use flexbox or grid and i mean sure while you're at it why don't you just go and loop over that array you have in your javascript without using a for loop or a for each or one of the other plenty of loops that you have at your disposal just do it you'll find the most complicated way to do it because i don't know but it did get me thinking because there's lots of ways to center things with css but some of them are easier some are the harder some are more practical or less practical so i was wondering how many easy ways are there to center things with css and what are the best situations to use them in hello there my friend and friends and welcome back to the channel i'm so happy that you're here and if you are new here my name is kevin and here on my channel we learn how to make the web and how to make it look good with weekly tips tricks and tutorials that are mostly focused around helping you fall in love with css and if not fall in love with it at least be a little bit less frustrated by it today we're going to be having some fun by centering things with css but since i have to take the absolute best solutions off because 95 of the time flex or grid are the best way to do it since we're taking those solutions off the table i'm not only going to be looking at how to do it but i'm going to be rating all of these based on a few different criteria so the first thing we're gonna be looking at is how easy is it and we're gonna be looking at is it like easy just to do right away do we need magic numbers to get it to work uh do we need lots of properties or is it relatively simple next up we're gonna do how easy are they to understand or maintain as part of your project and by that i mean like if another team member was to stumble across your uncommented code would they understand what's going on or would they just be staring at it and be completely lost and my last rating is the practicality of the solutions like is this something i would actually use even if it's maybe harder to understand maybe in certain situations that might even be better than flexor grid who knows so this is a challenge to myself to see how many solutions i can come up with to center something without flexor grid and then rate them based on how i feel in the moment of when i come up with them let's go and see how i can do with this all right so we're here in codepen so i put the link to this in the description down below if you want to play around with it a little bit yourself and what we're going to be doing first um the first thing i thought of was an old trick that i used to use all the time when i didn't know any better so it's based on text you wouldn't necessarily do this with a div i don't even know if it would work with a div but if you have some text somewhere obviously we know we can do a text align of center like that and it will go horizontally centered but then to vertically centered you can actually give something a line height of 400 pixels and you may be going kevin that's huge why 400. uh it's not quite centered we also need to say a margin of zero on that to get rid of the margin which is pushing it down and it's centered and if you know this trick you'll know why i chose 400 but it's to match the height of the box that it's inside of and this is kind of a cool trick where you can center stuff like that it has tons of drawbacks though it's really not the best solution because center me uh happened you know you you update your thing a bit and you have happens to be longer than it used to be um and the giant line height here causes all sorts of problems because obviously it's centered here for that first line but you can see the blue highlight there is the line height um yeah it's just it's not something that's super practical but it works i used to do that for navigations for a long time until i learned better um but that would work one way you could improve upon this i guess if you really needed to is with a custom property of height and do 400 pixels there or whatever we we're using height pixels for all this but var and then height here and then we could copy that and paste it down here so the advantage with this is you could you know you're increasing how easy it is to maintain because if you change this both of them will change at the same time and it will always stay centered uh but that said i'm not a huge fan of the solution so yeah as far as ease goes i think it's super easy to do so i'd give it like an eight or maybe even a nine but when it comes to maintenance or how easy it would be for someone who just stumbles across it to understand if they haven't seen that trick before they're gonna have no idea like if you had that line height here uh set to 400 and they come across that they're going to be confused they're going to change it it's going to break stuff so i'm giving it like a 2 under maintenance for your project it's also unless you're using the custom property here it's kind of not maintainable plus if the text gets a little bit longer you know we're knocking maintenance down to a one uh because the text changes it breaks onto multiple lines the whole thing goes out the window you can't do it so yeah there are one and as far as how practical it is yeah we'll give that a one two because for that reason i just said it's too easy to break it just there's so many other solutions we could be using instead so it's really easy once you know the trick but it's a terrible idea and you should never do it all right so on to the next one and since i was sort of in this idea of old school what i'm going to do is here on my inner text let's get rid of my now we're going to keep the text align center we're going to get rid of the line height because that's kind of terrible but for this we're actually have to go on to the outer box here and we're going to do and i said old school right we're going to do a display of table which is all super scary and this is really old school and here we're also going to change the display to table cell so it's acting like a table cell and what that opens up is a vertical a line of middle just like that and that should plop it right in the middle and it's kind of crazy to think that with tables way back in the day we had sort of easy and you usually was in a table so you didn't have to do these two and you were just in a cell already and then you could use this and we sort of lost that for a long time once we stopped doing layouts with with tables but it's also a really good thing that we stopped doing layouts with tables so how would i rate this for ease i'm not actually sure how to write this for ease because i it's kind of awkward unless you're if you're in a table the ease is like a 10 on 10 just because you just drop this where you need it but if you're not in a table it drops down like to maybe a six because you have to do a table on the outside and then the table cell on the inside one to be able to get it to work which is kind of awkward maintainability is dropping like way down because people would come across this and just have no idea why you're doing this so i don't think the maintainability or the practicality i think they're both just ones these days i don't think there's a good reason why you'd want to do this um and there are unintended things that could come up with things being table sales too so yeah i think for maintainability because nobody else would have any idea why you've done this actually you know what maybe maintainability to be a bit higher because vertical align middle is much better than like a line height of 400 pixels so maybe for maintainability we could pop it up to like a three maybe even a four but for practicality you know we have much better solutions so i'm keeping that one at a one for this maybe it's just because i've been scarred by table layouts and never want to see them again so they scare me but yeah let's not do this one either um so let's get rid of that and get rid of that um and for these next ones instead of text i'm going to do a box itself um and that last one would have worked pretty sure if we just had this box here um as well but um so this one what i'm going to do is a positioning so on my outer box i will come on and do a position position of relative to make this my containing block and i don't want to do this on inner text i do have my inner box right here let's copy that and just move it up to here um so we can style on here so the outer box is my position relative which makes it the containing box for here and that means i can come on here and say position absolute like that and then i can do a top of 50 and a left of 50 i think this was like the gold standard for a long time um but right now it's not working if you've never seen this before it might be kind of confusing but a lot of people i think might have seen this at one point or another uh basically what it's doing is it's putting the corner here at the exact 50 so it's moving it down by 50 and across by 50 but based on the corner right there so because of that what we can then do is a transform translate and just do a negative fifty percent and a negative fifty percent and that will plop it right in the middle and um so what this is doing these values are based on the parent so fifty percent across fifty 50 down and then these values here are based on the element itself so then it's going uh 50 across itself and 50 up and it ends up being perfectly centered now i'm actually a pretty big fan of this one uh i think it works really well if you're using pseudoelements anytime you're using position absolute a lot of other things that we would use go away so i do think that there's still value in this even though we have flex and grid options these days i think that this is actually a pretty good one um there are some things like you have to have the position relative here and then have this over here so there is you do need that like sort of connection to make or i mean this doesn't have to be a relative there's a few other ways to make that the containing block but um you do need the parent to have a property on it that's going to enable this to work and so from like an e's standpoint the ease on this is like a four right it's not the easiest thing to do you have to go to the parent set the position there or whatever to make it the containing block then you have a bunch of properties here you have to it's not that hard to remember i guess but it is a lot of like lines of css just to get this to work so i think the ease is maybe a four or five i'll go with a four maintainability and like someone comes across my code can they understand what's happening yeah sort of um you'd see a whole bunch of 50 so i guess you can sort of understand what's going on there but i don't think it's super duper obvious um it's definitely not like when you just have something saying center and it goes in the middle so from that point of view i'd probably give it maybe a six i think people know about it a lot i think if you see a whole bunch like top left transforms translates 50 you can sort of get the idea that it's the middle it's not the most obvious thing if you've never seen it but you play with the number and quickly you would realize what it's doing uh so for there sure and for practicality it'd actually give it like an eight uh i think it's super practical even today as i said if you're using position absolute then this is something that you'd probably use in an actual project at one point or another this one actually makes me think of another newer one that i've been using where what i'm going to do is let's get rid of all of this and we're going to stick with our position absolute but what i'm do is an inset of 0. so this is like a modern css take on the same thing so what instead of 0 is doing is if i don't have a width and a height let's just comment those out for one second it's going to fill up the entire parent so this is a top left bottom right all of zero so i'm saying top left bottom right all zero and that's letting it live within that space um because this is 200 by 200 i have the 400 by 600 for my box so it has the space to live in but it's still sitting at 200 by 200 and then i could come here and just say margin auto uh and that gives me the same result look at that um and i like this a lot better and you could do this again you don't have to use inset you could use top bottom left and right instead but i do think this for the is the same as my previous solution but better this is the better version uh and i was pretty high on that last one so like from a ease of use it's easier there's a one less line of code but it's also a lot less characters going on like you don't have the the whole translate transform negative 50 negative 50 like this is a lot simpler so i'm giving it like a nine on just ease of use i think it's really easy it would be a 10 if we didn't need this guy up here but we do so uh without one thing is if this was like a fixed one instead of something that's position absolute then you don't have anything up here so maybe on fixed it's a 10 but with absolute it's a 9. maintainability is an 8 maybe people might not know inset um even though i think it's going to become very popular very quickly since it's a shorthand for top bottom left and right and the margin auto is a super obvious right we know margin auto centers things and the fact that this also centers vertically is just really really really awesome so yeah i'd give this an 8 there probably and maybe as high as a nine for practicality a little bit better than the last one i think this is a really awesome solution for when you do need absolute positioning if you don't need absolute positioning you should just be using flex for this but if it's a pseudo element and you sort of have to do that there's other reasons for using something like this and you know this is probably the go-to these days for what i'll be doing if i need to do something like that all right so that's sort of the big guns but there is another one that i can think of that's a little bit different i'm going to keep this box here but let's get rid of the positioning because we don't need that this is one where i'm actually going to take the and you could you could leave height as part of this but i'm going to take the height off and this is one where people don't always think of it but i'm gonna go in my inner box and i'm gonna say this is like my simple one early days of everything i'm gonna say a margin of zero auto so zero top bottom auto left and right uh and then i'm just going to come on my outer box and set some padding here so we'll do padding top and bottom of let's say 300 pixels and a left and right of zero and by doing that you get it centered and maybe we'll drop that down 200. so you have equal padding on the top and the bottom is giving you that space and because i have a width and this is centering within that width it's working there too and i love this solution i mean this is really great and you could even like let's take off my inner box and put the text back in um for me you have a big hero area and you just need your text or whatever it is centered in that equal padding top and bottom getting the job done a lot of the time and you can even like push this right so let's just say um this is maybe a little bit of an exaggeration of what i'm going to do here but let's say that the uh let's just actually we'll do a hundred width is gonna be a hundred percent now um so it's more like hero area e um and then i have some stuff on my my code pen lower down to center it that way but let's say that my padding then becomes uh 100 oh no sorry i will do 50 viewport height and this could sort of give you that like full width thing except now like this is a full width page center but we do have a bit of scrolling because of this guy here um and actually text is gonna be hard to do it with maybe i should have done it with a box um because then what we could do is and again this is not i'm getting out of the realm of practical at this point um but say we did inner height is uh 200 pixels um and then here i would have my var inner height and the big advantage of doing something like this is on my padding i could actually do a calc here calc of var inner height minus uh or var end or height actually i want to do 50 viewport height minus my var inner height um which should give me oh you know what that's not actually i just thought of that let's do the inner height is uh there's two options here because what's happening is it's subtracting too much um so i could either do a calc down here to double the height in this part or i could do another calc and this is this is we're getting out of the realm of like something you'd actually want to have on a page now maybe because it's getting a little bit over the top but we could do an inner height here divided by two is this even gonna work there we go look at that um i do have a bit of side scrolling up or this is scrolling for some reason but that technically oh you know what it is it's my border here let's turn that off uh there we go perfectly centered on the page 100 viewport height uh have full width uh practicality on this not the greatest um it's not the easiest to do so ease is kind of low maybe like a three practicality or maintenance or probably like a five and then the practicality is kind of low too because there's other ways of doing this so maybe like a four um because maybe there's some situations where you'd need this type of thing going on um i also don't like the idea of setting a set height on my inner box it's a lot better but you know you could use even javascript to populate this number for you and then center something like that and that could be kind of cool too um but yeah just coming up with ideas here on how we can perfectly center something and now i pushed it a little more to have like a view a very specific height set to it as well uh and you could change the you could have a definitely like a custom property here for viewport height uh the outer height as well and sort of play around with all the numbers so here this wouldn't be 50 it would be a play on your total outer height that you wanted divided by two so it's split amongst the top and bottom and stuff you can come up with some fun stuff with this but the practicality just sort of it gets a little weird i think um and it makes me very happy that we have flexbox and grid to be able to do a lot of this stuff and i would love to know is there any other solutions i didn't think of that you know of that you could center things vertically and horizontally without flexbox and grid if so please leave them in the comments down below to let me know and with that a really big thank you to my supporters of awesome zack and randy as well as all my other patrons for their monthly support and of course until next time don't forget to make your recording internet just a little bit more awesome

Channel: Kevin Powell

Views: 28,718

Rating: 4.9706655 out of 5

Keywords: Kevin Powell, center vertically, centering with css, css, css center, flexbox, front-end, frontend, grid, how to center css, html, line-height, padding, position absolute, tutorial, vertical center, vertical center css, css flexbox, css grid, css centering

Id: 87YMCtsBoCM

Length: 17min 24sec (1044 seconds)

Published: Thu Aug 12 2021