Estoy teniendo un problema a la hora de centrar algo en el centro de la página, como podéis ver en el siguiente codepen https://codepen.io/alevidals/pen/gOLWexM tengo un texto que me gustaría centrar sin afectar al header. ¿Cómo podría conseguir este resultado? El texto que me gustaría centrar es el que dice: "Registrate o inicia sesión para coger cita", me gustaría que estuviera en el centro de la página (tanto vertical como horizontalmente). En la página final además del texto irán más cosas, pero querría saber como conseguir esto y ya luego le empiezo a añadir lo demás.
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
#body {
font-family: 'Roboto', sans-serif;
}
#menu-toggle:checked + #menu {
display: block;
}
.bg {
height: 100vh;
width: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url('https://pixabay.com/get/gf7622c0d4c53920496b6da3b5f755bc65d1c2d33233deb99759cdfcdec50bcc7baf7d8ddfc564cff1ac96fa99460ca4e_1920.jpg');
background-size: cover;
}
</style>
<div class="bg">
<header
class="lg:px-16 px-6 bg-white flex flex-wrap items-center lg:py-0 py-2"
>
<div class="flex-1 flex justify-between items-center">
<a href="#" class="flex items-center hover:text-green-600">
<img src="https://randomuser.me/api/portraits/men/88.jpg" alt="logo" class="w-9" />
<h2 class="ml-3 uppercase">Peluquería</h2>
</a>
</div>
<label for="menu-toggle" class="cursor-pointer lg:hidden block">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
>
<title>menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
</svg>
</label>
<input type="checkbox" class="hidden" id="menu-toggle" />
<div class="hidden lg:flex lg:items-center lg:w-auto w-full" id="menu">
<nav>
<ul
class="lg:flex items-center justify-between text-base text-gray-700 pt-4 lg:pt-0"
>
<li>
<a href="#" class="lg:p-4 py-3 px-0 block border-b-2 border-transparent hover:border-green-500">Inicio</a>
</li>
<li>
<a href="#" class="lg:p-4 py-3 px-0 block border-b-2 border-transparent hover:border-green-500">Citas</a>
</li>
<li>
<a href="#" class="lg:p-4 py-3 px-0 block border-b-2 border-transparent hover:border-green-500">Login</a>
</li>
<li>
<a href="#" class="lg:p-4 py-3 px-0 block border-b-2 border-transparent hover:border-green-500">Registrarse</a>
</li>
</ul>
</nav>
<a
href="#"
class="lg:ml-4 flex items-center justify-start lg:mb-0 mb-4 cursor-pointer"
>
<img
src="https://randomuser.me/api/portraits/men/88.jpg"
alt="user-img"
class="rounded-full w-10 h-10 border-2 border-transparent hover:border-green-500"
/>
</a>
</div>
</header>
<div class="lg:px-16 px-6 mt-16">
<h1 class="text-7xl uppercase font-extrabold text-center text-white">
Registrate o inicia <br />
sesión para coger cita
</h1>
</div>
</div>
Gracias de antemano. Un saludo.