Centering

Back to the hero. Its content is on the left, but a welcome like this usually sits in the middle of the area, both horizontally and vertically.

In the CSS course, you centered things both ways with display: flex, justify-content: center and align-items: center. In Tailwind, those are the classes flex justify-center items-center. Our hero is a column, so the axes are turned: items-center centers its items horizontally, and justify-center vertically.

Vertical centering only makes sense when the container is taller than its content. The class min-h-96 (min-height: 24rem, 384 px) gives the hero a minimum height: it's at least that tall, and taller when its content needs more space. (You know min-h-screen; min-h-* also takes the numbers of the spacing scale.)

A grid can center too. The class place-items-center (place-items: center) centers each grid item in its cell, both ways. For a single child, it's the shortest way to center it:

<div class="grid place-items-center size-24 rounded-full bg-orange-100">🐾</div>

Our hero has three children, though, and a grid would put each of them into a row of its own and spread the rows over the whole height. For several items, flexbox is the right tool.

One more thing: when you change items-start to items-center, really replace it. If both classes stay, items-start wins, even though items-center is written after it. Remember from the lesson on colors and text: when two classes set the same property, their order in the class attribute doesn't matter, only the order of their rules in the stylesheet that Tailwind makes.