Intenta colocandole una clase que contenga un display flex a tu div que contiene el h1 de la siguiente forma..
<div class="text-center-test lg:px-16 px-6">
Observación: debes quitarle el mt-16 que le asignaste y el background podrias asignarselo al body en general..
css
.text-center-test {
align-items: center;
display: flex;
height: 100vh;
}
Aqui esta el resultado de tu codigo..
HTML
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<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="text-center-test lg:px-16 px-6" >
<h1 class="text-7xl uppercase font-extrabold text-center text-white">
Registrate o inicia <br />
sesión para coger cita
</h1>
</div>
</div>
css
@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 {
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;
}
#body {
font-family: 'Roboto', sans-serif;
}
#menu-toggle:checked + #menu {
display: block;
}
.bg {
height: 100vh;
width: 100%;
}
.text-center-test {
align-items: center;
display: flex;
height: 100vh;
}