 Welcome to GUI Challenges where I create interfaces my way and then challenge you to do your way. With our creative minds combined, we'll find multiple ways to solve these interfaces and expand the diversity of our skills. Today's GUI Challenge is centering in CSS. It's a notoriously difficult task. So I wanted to share five centering techniques that follow me everywhere I go because it turns out there's different kinds of centering. We have contestants today as they battle for a place in your tool belt. Contestant number one is content center. It's using display grid and place content center and it also has some gap. And we can see with the pink border around our edge here that those centering styles are coming from this display grid. So it's trying to help you see the ownership of where this centering is coming from. All right. Well, contestant number two, gentle flex. Gee, I wonder if that's using display flex. It is again, just a single pink border or on the outside. We have container owned centering. But down here, contestant number three, Autobot, we have two borders. It's because we have a display flex on the container and all the children just have margin auto set. So equal pushing on all sides of the box equals being in the center. Contestant number four, fluffy center. This one is just using padding. I see. So if you pad something equally, you can be in the center. Yes, I find I use this all the time. And contestant number five, pop and plop. For those moments where you just need to pop out of flow and plop on top of everything else. And so position absolute top left usually comes with a Z index. And then we transform and translate ourselves. So we're into the center and we have ourself a fifth contestant for when you need to center and be on top. Because I think that happens now that we've met our contestants, we understand how they work and we can see some of their CSS. It's time to put them to a test so that we can feel them out. We want to see how these perform under some chaos. The first type of chaos we're going to bring is the variability of viewport sizes. So we're going to change the width on all of these and watch to see how they do. Content center keeps things absolutely in the center is the width gets squashed. Same with gentle flex. Look at that. Just keeping things as much in the center as possible. So we get down here to Autobot. Autobot sticks to that inline start space there, which is kind of interesting as it loses its width, but still nothing is really that lost here. Fluffy center is not performing well in a squish because well, it breaks to a new line when there's enough space, it looks like it doesn't have to. That just means our padding is not dynamic. It's not fluid, but that's okay. I don't think we expect anything more out of this. So we'll talk more about why that's okay, but look at it's not squishing very well. Or squish is kind of funny. But that's fine. This also squishes funny. Pop and Plop has a little bit of a squish issue here where you can see that it starts to break into new lines at about 50% width. And that's the nature of this hack. Now there's ways around it, but that's the default behavior that you get out of it. And maybe even that's what you want. So okay, so the first chaos that we brought was the variability of viewport width. Now let's change viewport height. So we're going to change the height and see how these respond. I expect that we're not going to see very much different here. Yeah, look, our grid and flex center examples keep things absolutely in the center. And as we do this to Autobot, Autobot hugs that block start. So we're hugging inline start and block start. That's kind of interesting. Fluffy center. As I squish, it's well, it's demanding this much space. So as the space around it shrinks, it doesn't it doesn't matter. The box just continues out into overflow. And we have pop and plop. And how is it going to do with height changes? It Well, I guess it handles just like flex and grid. So it's staying right there in the center. All right, so most of these did pretty good. Nothing really catastrophically failed. We saw lots of great success. Some really nice successful centering strategies. But now we're going to bring some extra levels of chaos. So we're not just bringing viewport variability, we are going to bring content variability. This comes down to being translated into multiple languages. We want to see how this does with variability and content length. So imagine something coming from a CMS where someone could be typing one word or a whole paragraph. And then we want to test on how this is rendering across different locales. So if this is a document direction or a writing mode change, like if we're in a different country, we want to make sure that we are still centered, right? This should be a centered strategy that's resilient across all these vectors. So in order to test all of that, I added some children. So now there are three items that need centered. And I made the first item really long, except that the fluffy one, it's just always long. The first item is really long and the last item is really short. Now we can start to see how these are struggling, right? Look at some of the deficiencies that we see. This one is arguably not even centered anymore. Our gentle flex is arguably the most center and Autobot seems to be fine. Okay, those are centered in a row, okay? And padding is, well padding is arguably still centered. It's really big, but it always was. And our pop and plop, that's really struggling. I mean, look at these children. They're pop and plopping all over each other. And the one that's on top is the last one, which is kind of funny. So the last in is on top. So it's like a dog pile. Look, we have a dog pile here as a solution. That's not that great. And also, so why is this so wide? Look as I go, all this width, that's really annoying, right? Over here too. Why is this item so wide? Well, it turns out that a paragraph, if you don't give it any width, will be as long as its content. And that can be really long. It's like dumping a bucket of water out on the floor. If you don't have any edges for it to stay with inside, it doesn't know what to do other than continue going to the edge. It's like, look, we can see it's liquid. This paragraph is very liquid. So what we're going to do is we're going to write a little bit of CSS to mitigate this, which is just my common solution to do this. So I'll grab all the direct descendant, each ones of each article. And I'm going to give them a max inline size of 20 characters. And by doing that, we can see that they now don't go all the way to the edge. They're not liquid. They have a constraint, which is a max width. And I like that max width because it's character based. So it can be kind of legible based. Anyway, by expanding this, we can now see that our centering solutions with grid inflex box are in fact still centering solutions. It's just we had some rowdy children. So let's give these all a squish and a squash again, as we give them a test with multiple child items and some dynamic content. And we can see that this one kind of works as we'd expected to. Yeah, excellent. This one, squash, squish, squash, not surprising. As we get more space, we get space between our children. But as we lose space, we can see why gap is nice because look as this continues down our space between those and our centered strategy stay in line. That would be something that might be hard to manage here in the margin auto. Our fluffy item. Well, it's in the center. I don't really need to test it. It's doing great. Our pop and plop solution. Let's give it a squish and a squash. And look at that. It's sort of that problem that was before sort of words breaking early is now whole paragraph with the lines breaking early. So that might be really annoying. Just depends on what you're trying to use it for. The next test that we're going to do is super fun. We are going to translate this page to Hebrew. And then we're going to give all of these a right to left. So and let's see how they do. Okay. So right to left. And look at my squish and squash item is over here on the left now. Sue, right to left over here. How does it do? Looks great. Right to left. Interesting. We got a rearranging because our inline axis needs to change in a right to left language. So we were reading left to right. So our first item, which was our big item, was on the left. But now we're reading right to left, which means our biggest item needs to go on the right. And our smallest item goes on the left. Cool. Tricky. We would have seen that with our grid and flex box solutions if they were in a direction of a row, but they are not. They are in a block direction of columns. Okay. Our padding. Let's go right to left. Great. It knows how to respond to that. That's no big deal. And our absolute positioning. And look at that. So even though we pop out of flow in terms of like display order with position absolute, we are still in relative flow. So our like render direction of our text is still applicable based on the writing mode and the writing direction. That's super cool. Okay. I'm going to undo all of those right to left. And then we're going to pick a new language and we're going to do vertical right to left. So this time we are going to translate to, we're going to choose another language. And we're going to choose Chinese. Chinese traditional. We'll translate the page and do right to left and see how these do. Okay. So look at our display grid place content center with vertical right to left. How cool is that? And if this was scrolling, it would scroll off to the left. Super cool. Let's even squish and squash. I like it. Looks really great. And the reason also that this is not extending to the sides because remember paragraphs like to do that is because we set a max inline size, not a max width. A max width would have been this side this way, but we did it in line size. So it's maxing out the character, the way that the characters are flowing. Super cool. All right. Gentle flex. That looks awesome. Very centered. Looks even printable. That looks like graphic art. I love it. Our margin auto solution. It's looking great. So again, we are going, oh, we haven't hit our button yet for vertical right to left. I was like, wait a sec. This should be on the right. Oh, it should be on the top. Oh, because of our flex direction. Interesting. Okay. So I don't know if you're flown with like what happened there, but that is an interesting result for me. I was not expecting that. And look at these. These are kind of struggling to stay in center here. Oh, that's because of the way that the characters flow. Very interesting. So we really should be doing some flex direction work here if we're going to be using margin auto to center stuff. It's just not a viable strategy for multiple items unless you're kind of grabbing the reins a little bit more. That's interesting. Okay. Let's do this. Vertical right to left. Very cool. I love the emoji ending at the far left and bottom there. And it looks great. And our last one, vertical right to left. Even our absolutely positioned elements know how to be in relative flow. Look at that. It's still kind of funny. We have all these. I'm going to pop up in Visbug, grab the position tool because it's just too fun to grab these and move them around. Oh, and look as they move around, they're reaching edges and reflowing. That is funny. How cool. Oh, interesting. Whoa. All right. Well, anyway, enough of me just playing with Visbug and positioning these things. It's an absolute positioned layout. And so this is the absolute position Visbug tool. So anyway, in case you're wondering what's happening, but how cool was all this test work that we did? We now get to look at these layouts that are in traditional Chinese vertical right to left. We're testing out how well things center internationally. And we've vetted five different strategies for centering. We've seen their pain points. We fixed them. And now we know the strengths and weaknesses of these. I just think this is super cool. I hope you enjoyed watching all these ways to center in CSS. And I want to see the way that you center, send me your centering strategies, show me some of the ways that I forgot or show me some of the ways that you find are all over your style sheets, even though you hate it. And that's it. Thanks for watching this centering episode of GUI Challenges. I look forward to your code submissions. And as always, the code is open source and you can find it online. Look in the show notes and find me on Twitter. And I'll see you in the next episode.