I've got the following code and have tried adding "justify-content", "align-middle", and others but still can't seem to get it to align the h5 and link in the middle of the containing div. Should I be structuring this another way, without using "flex" or "flex-col"?
<section id="cta-image-box"
class="container mx-auto py-24 mt-32 mb-32">
<div class="h-[335px] rounded-[40px] bg-slate-500 bg-bgCTA bg-cover bg-center bg-blend-multiply">
<div class="flex flex-col items-center">
<h5 class="text-5xl font-bold text-white mb-10">
Lorem ipsum dolor site <span class="text-gray-300">15% OFF</span> amet
</h5>
<a href="#"
alt=""
class="px-6 py-3 w-fit rounded-full bg-slate-200 text-gray-800 hover:bg-slate-800 hover:text-white">
Discount Code
</a>
</div>
</div>
</section>
You can achieve this using h-full and place-content-center place-items-center on wrapper div.
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<section id="cta-image-box" class="container mx-auto py-24 mt-32 mb-32">
<div class="h-[335px] rounded-[40px] bg-slate-500 bg-bgCTA bg-cover bg-center bg-blend-multiply">
<div class="h-full flex flex-col place-content-center text-center place-items-center">
<h5 class="text-5xl font-bold text-white mb-10">
Lorem ipsum dolor site <span class="text-gray-300">15% OFF</span> amet
</h5>
<a href="#" alt="" class="px-6 py-3 w-fit rounded-full bg-slate-200 text-gray-800 hover:bg-slate-800 hover:text-white">
Discount Code
</a>
</div>
</div>
</section>
</body>