 Hello and welcome back to the CSS podcast. On this season we're answering your most burning CSS questions and today we're covering a very common CSS issue which is how do I center this div? This is often used as a joke in CSS to articulate how hard simple things can be and also just how contextual the question is because the answer is often what kind of centering do you need? They aren't all the same and this episode is probably going to cover that you might be able to center things in way more ways than you realize. Right, we've got like nine or ten in here because there's horizontal centering, vertical centering, there's alignment, there's stretching, there's overlapping, still in flow, out of flow, positioned absolute, positioned with transforms, you can center in a lot of ways. So the answer to the question lies in the desired output or use cases. I like how that's like the answer to the question lies and it's like what am I some sage on the sage of centering? Hey, that had a good... There's so many ways to center, yeah. But what's cool, at least I think it's cool, is that CSS as your back, you know, and the CSS podcast we got you back to because we'll be breaking down a bunch of these common ways to center stuff, their use cases, and they got you. So to kick things off nice and light, sometimes all you want is horizontal centering of an inline element. So you can use the classic text align center for that. This is great for putting text in a horizontal center or inline center, but it might have side effects for aligning boxes. But this will, well, it'll align text to center. So if you're using it to center a box, the text inside of that box will inherit the text line center. And that might not be what you wanted. It might be what you wanted when you use text line center, but just an asterisk that it does have side effects. Two birds, one stone. But yeah, who knows if that's what you really wanted. The next one we have here, some of these have fun names too. So okay, ready for some silly cool names. This one is not... We like to name things. Naming things is fun, especially when they're alliterations like this one, content center. Hey, they start with the same letter, but you don't say it the same. That's annoying. It's called content center because it uses the place content shorthand. So we've got this class name called content center. We're setting display to grid, place content to center, and a gap is optional. You know, if you have multiple items, you're going to want a gap between them. But this one is one of my favorite centering strategies to start with. Because, well, it's one pretty much one line of code. You do display grid and then place content center. But it's a great place to start for horizontal and vertically aligned layouts because it's just a couple lines, like I said, and it places the content in the center. Now it places the content in the center, not the items. There's also a shorthand called place items, which we'll cover here soon. So it'll treat when you use the content keyword, it treats all the children as a group and centers the items as a group together. So it's not treating them as individuals. It's treating them as a cohesive unit to be centered. It also stretches the short width items to match the width of the widest item, which might not be what you want, but maybe it is. So in some ways, it's kind of aggressive because it will stretch and change the size of elements in order to place the group in the centered state, which is why I start with this one. And then I eventually go, oh, that's doing something I don't want. And then I switch to something else. So this is one I use mostly for my macro layouts, where the side effects are okay, where I want the stretching to fill available space. I like to call this one super centered because it's the same s sound with super and center. And it does what it sounds like. But I tend to use this with place item center. So I might have display grid and place item center. If you have one parent element, they pretty much look the same. But place items lets you align items on both the block axis and the inline axis at the same time. So this lets you do align items and justify items at the same time. And this tends to be my go to just because it works so well in one line of code along with grid. But there's primarily two differences between the place content and place items. With content, the alignment container is the parent of the element itself. With items, the alignment container is each individual child elements box within the parent element. So like I mentioned earlier, most of the time that I use this, there's usually one parent and there's no real difference between this and place content center. The difference really comes when you have multiple items within the child they are applying it to. So with place content center, that will, if you have two items, it'll put them right up next to each other in the middle. So they might be like one right after the other. With place items, it's going to add space between them because it's centering each individual child element within the box of its parent. So that's the primary difference between these. It's items versus content. And you could see which one works best for you. Again, if you only have one parent that you're centering inside the page for demos, it's not going to make a huge difference. But if you have multiple, it depends on if you want them to be condensed or spaced a little bit here. So there's, there's some links here. We'll put them in the show notes for you to explore these. I have a demo here. Adam has a demo here. Honestly, the best way to learn this stuff is to use it. So figuring out the difference between place items, place content, comparing them with grid and with flex box, the best way is to use it. With grid, you'll mostly retain. So for example, if you have text that's left aligned, you'll retain that with flex. If you do the place items center, or it'll possibly center align it. So it depends on how you're using it. And it depends on what you want. But definitely check out the demos. It's probably easier to learn with those demos than to listen. So that'll be your homework after the subject. Yeah, that demo puts them all next to each other. Like, what does place items do in flex? What does place content do in flex? And then it has multiple, you can kind of see the results. It's really nice. Yeah. And it really depends if you have a parent container too, because a parent container will prevent those items from centering if you have that unexpected result. So really, it depends. And it's a tough subject. Like I was mentioning earlier, like I think of content like treating the, all of the children as a group and like centering the group. Whereas items, it's like an item, but another way to think about it too is it's like the place content is kind of surface level. Again, like you're treating them all the same and they need to all fit into the same centered space where items kind of goes down a level deeper. And it's willing to look in an item by item basis as opposed to how they all are going to align. And so that's why items can change items size as well. Anyway, it's just cool. Look at the demo. This stuff's tough. Our next one here is called the gentle flex. And this one is display flex. You know, you can change the flex direction. If you want, I'm going to set mine right here to flex direction column. And then I'm going to say align items center and justify content center. So align items and justify content. This isn't place items or place content. This is half of each of those short hands. And I call this one the gentle flex because it doesn't change the size of any content while doing the aligning. And to me, that's really important. So it has the least amount of side effects and generally gives you exactly what you wanted, which is just alignment. The only cost of this particular centering strategy is it's the most wordy and it's the longest one to write. And there's no kind of cool shorthands. But you know, make a class, set it and forget it. And you can just go, you know, gentle flex or the best center class or whatever you want to call it. And if you wanted, you could write display flex, flex direction column, place items center, justify content center, and you'll get the exact same result. You're just kind of over specifying what you want. So like you said, place items center, which is going to be align items and align content center, which isn't... Anyway, some of those things get thrown away. So you want to use the shorthand you can, but I like keeping it kind of minimal here, but it's the gentle flex. Yeah, utility classes are great for all of these. So that's likely how you're going to be using this. You don't have to really remember all the content inside them, just what they do and how you are centering those things. So the next example is called Autobot. This one is courtesy of Adam named Autobot. And so within this class, we have display flex in the parent, and then it applies a global selector to all of its children. So you can do that greater than and then asterisk and then margin auto. Using margin auto isn't something that was historically like super useful. It hasn't really been a viable option, like maybe margin zero auto to center something, but it's a lot more useful now when you can use it inside of a grid or a flex container. So it's mostly only good for single children centering, but maybe you'll find other use cases for centering with margin auto when combining it with some of these other placement mechanisms. Awesome. This next one is called Fluffy Center. And it's just where you center something with padding. So you've got like a button, and you usually don't set a height and a width on a button, but your text looked centered in your button, and you could add text line center to your button, but that's irrelevant. You're centering by pushing equally out from the edges. And I call it Fluffy Center because you can make something appear centered by just this equal sides or complimentary sides, right? Like same amount on the left and the right. You'll get like a horizontal centering. And this is different than aligning horizontally and vertically because the appearance is of centering, but it's coming from this pushing of the inside's content. So this puffy fluffy centering technique can be handy for handling scenarios like buttons, where you want it to be intrinsically centered around the size of the content itself. So again, just like one of those ones where like, oh, this has just an edge case, but I totally would need centering in that way sometimes. I never thought about this as centering. I mean, obviously it's all time buttons, other components, cards, but in a way it is centering. It's funny that it's included in this list of centering because technically correct. Yes. This next one is called Pop and Plop. So first we'll have to position relative the parent. And then for a child and that parent, which you can do the same technique of applying it to all children, or you could just apply this individually as needed. You would have a position absolute. So you're absolutely positioning that within the relative parent. And then you have an inset of 50%, auto, auto 50%. So then you would have to translate it back. So you got to do the translation of negative 50%, negative 50%. So this is a way that we have to center things sometimes. And with Calc you might have to center things like this with anchor positioning. The initial spec had this requirement where you had to shift things back after you positioned it center. And so I don't really think this is hack really anymore, but I guess in terms of the inset and the translate, it might be. But this centers things via movement, via the inset positioning, via translating it back to the center. So it's sort of pushing and pulling. And this is sort of this positional centered anchoring, which you then would transform to make things stay in the middle. This centers all the children in that parent element. It also puts them on top of each other like a pile. So you pop and plop them, pop them out, transition them, move them around, then you plop them on top of one another. And they're all in the center together in this one big dog pile. Yep, Will said. The next one here is grid pile, or I called it, AKA the modern plop. I love the term grid pile, by the way. I read your article where you mentioned grid pile as one of the top things developers need to know in 2022 or 2023, I don't remember which year it was. And grid pile just killed me. And then I used it in description in an article that I wrote and linked to that article by you. Awesome. I use this one all the time now. Yeah, I don't have to really use the pop and plop anymore, unless I really want absolutely positioned elements for whatever reason, but I usually reach for the grid pile because it's pretty often that you want to stack things like cards, you know, you do a little card effect, you have to stack them on top of each other. So instead of position absolute, you can say display grid. And then the grid definition is you can name each of the rows and columns here. So I'm going to use square brackets and put the word stack, you can also put the word pile in there, and then space one FR, then do a slash stack space one of far. So essentially you're saying the grid row is named stack, and it fills the space. And the column is named stack, and it fills the space. And then you target the direct descendants, anybody that you want to be in the pile. And you say your grid area is stack. And that is the same name for the row and the column. Therefore, all of the children get placed on the same single cell grid, which is the same spot on top of each other. And you've got yourself a modern plop grid pile. And it's so, so useful. I literally use this all the time now. So grid piles, handy dandy use it. It's like the thing you need to know about front and depth things. There's weird. It's like, I think this one's most because the height of the thing doesn't collapse as soon as all the children pop, right? So the pop and plop was like, they pop out of flow, and then they get plopped on top of each other. And this one, they stay in flow ish. So the tallest item determines the size of the cell. And that's just cool. So another thing that I find super, super handy is if you have, say you have like a blog post where you have a max width of, I don't know, say 700 pixels, why not? But you want something to sort of break out of that 700 pixels, and you'd be full width. So I use this all over my blog, I call this breakout. And the way that you would write something like this is if you had a class, you would give it a width of 100vw. So some like specific width position relative, and then set it to left 50%. And then we're going to do that transform again, where we would then translate the x value to negative 50%. So I could just write translate negative 50% zero. But this is literally a class from my 2018 blog that I still use today, this full width class or breakout class, where it helps you to center something by being full width across the whole page, you're sort of moving it by translating it back to center. And you can break out of that parent container. Because if you didn't set the width, if you set the width 100vw, and you didn't shift it back, then it would cause scroll and overflow and like some weirdness on your page. So this will help with that. And it's also very, very useful. So I do this for multiple different elements to kind of give depth and dimension to the blog. Very cool. Yeah, breaking the lines. They'll break out. Also, if you are using Grid and Flex, there are great DevTools in DevTools and Chrome DevTools, where you could see what the justify and alignment and contents and all that do with some little icon previews. So you can explore that way. Those are super useful. My favorite DevTools feature additions. So definitely check those out if you haven't. And that's all we got for you today. Hope you're feeling nice and centered now. We appreciate your listenership. Hopefully you learned a few different ways to center and maybe more than you realized were possible. And if you know more ways to center, send them to us. Let's make the megalist of centering. I'm sure that's an article on like CSS tricks. Although we're probably at more ways now, so we'll have to check that out. I know. I'm like reading something. It's like, oh, we can make adjustments. The megalist of centering. The megalist centering list. That's also probably just going to overwhelm someone. So CSS is easy and centering is place content or place items. Probably what you need. Yeah. Those are really great properties. I'm a big fan. Well, anyway, this has been awesome show. And if you have any CSS questions, we'd love to answer them on the show. Just tweet us with the hashtag CSS podcast. You can find me on that Twitter site at Yuna at UNA. That's our link on there. Find me. And your question can help a lot of people. Like right now, you listen to this and go, I learned about a CSS property. Well, you could be inspiring others to just send us those questions. If you found this helpful, then please give us a review on whatever podcast app you're using. That's how you can help us help you. You can share this with a friend. That also helps us help you. And we appreciate those reviews. We read the reviews. And we also appreciate you helping other people find our show and spread the CSS centering love. Spread the CSS. We're looking forward to your questions. And we'll see you next time. Bye, everyone.