Laying Things Out (Positioning & Structure)
Center something perfectly in the middle of a box (both ways).
Skill ID: LayingThingsOut_5
Description: Place an item exactly in the horizontal and vertical center of the area it's in.
Where to apply: A loading icon, a title in a hero banner, a pop-up message.
Key Tailwind Classes:
flex
items-center
justify-center
Gotcha:
The parent container needs to have a defined height (e.g.,
h-32
,
min-h-screen
) for
items-center
(vertical centering) to work as expected. If the parent's height is just based on its content, the item won't appear vertically centered.
Example:
Below is a parent div (gray border) with a fixed height using
h-48
. The child div (blue) is centered using
flex items-center justify-center
on the parent.
<div class="h-48 bg-slate-200 border border-slate-400 rounded-md flex items-center justify-center">
<div class="bg-blue-500 text-white p-4 rounded-md shadow-md w-32 h-16 flex items-center justify-center text-center">
Centered Item
</div>
</div>