The easiest, and some new ways, to center with CSS

One of the best things with modern CSS is the abundance of ways to center things both horizontally and vertically. I think the easiest thing to do is still a display of grid with a place content of center. But we have other alternatives that we're going to look at in a second. But if we do that, we can see that I'm centering everything perfectly here. Uh the place content is a shorthand for justify content and aligning content which with grid works, which is why it's only a twoliner here. Interestingly, we can have another twoliner. Now, the browser support is not good enough. So, I would probably continue using this, but I can do an align content of center and a justify items of center. And that's with removing the display grid. There's no grid on here. And as we can see down here, this is actually getting centered within the space. Uh, which is kind of interesting that they've brought this to regular block elements. You might be thinking this looks backwards because you're used to doing align items and justify content for flexbox, which yes, that is the case. This isn't a situation of CSS being weird and annoying if you look at how the idea or the concepts of content and items work in the block context. This does make sense, but it is a little bit frustrating that it's backwards from what we're used to. I won't lie. And because browser support's not as good, I'd probably even going forward, I don't see a reason not to use the grid solution because that is still just a twoliner. Uh, but I did have this position relative here on purpose because if I come and I take this paragraph out and let's just say that my H2 is actually a position of absolute. So pulls it out of the flow. Everything looks fine except you'll notice it's right in the middle. Why is it in the middle? Well, I've done position absolute inset of zero and a place self of center. And we can use the place or that also means alignment and justification properties because the place once again is a shorthand uh on absolutely positioned elements. Now, so inset zero top is the short hand for top, bottom, left, and right of zero. And then we're doing the align self and justify self center. And we can easily center that. So again, abundance of ways to center things in CSS. Really depends on the use case, the different thing you've come across, and what you need in any given situation. But I'd rather have too many ways of doing something than not enough like we used