I’m trying to set the login container on the remaining height in the middle of the screen, it seems justify-content sets the content in the center, however, align-items: center doesn’t work in this case, even if I set the container height to 100%.
I’ve tried also setting height 100% for the body, but if you resize the window it overflows somehow over the navbar and also in fullscreen you can scroll a bit which i don’t want that.
I’m using tailwindcss. I’ve tried to replicate that also in custom css, but it doesn’t work.
How can I fix this? I just want something simillar like when you go to google to login.
html {
height: 100%;
}
body {
min-height: 100%;
overflow-x: hidden;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="antialiased text-slate-400 bg-slate-900">
<div class="h-full">
<!-- Navbar -->
<nav
class="w-full flex justify-between items-center px-10 py-4 border-b border-b-slate-700">
<a href="/" class="relative text-3xl text-slate-200 font-bold tracking-wider" >Navbar</a>
<ul class="flex gap-5 cursor-pointer">
<li>
<a href="/" class="px-4 py-2 border border-transparent font-semibold rounded-lg duration-100" >Home</a>
</li>
<li>
<a href="/login" class="px-4 py-2 border border-transparent font-semibold rounded-lg duration-100">Login</a>
</li>
</ul>
</nav>
<!-- Login -->
<div class="h-full flex justify-center items-center">
<div class="w-[350px] flex flex-col justify-center items-center space-y-10 px-10 py-10 border border-slate-700/50 shadow-lg rounded-lg">
<h3 class="mb-5 flex justify-center items-center text-2xl font-bold text-sky-500 cursor-default">Login</h3>
<form class="flex flex-col justify-center gap-3">
<label for="username" class="font-semibold">Username</label>
<input
type="text"
name="username"
id="username"
class="outline-none bg-sky-600/10 px-4 py-2 rounded-md font-semibold text-slate-300 placeholder:text-sm placeholder:font-semibold"
placeholder="Enter your username"
/>
<label for="password" class="font-semibold">Password</label>
<input
type="password"
name="password"
id="password"
class="outline-none bg-sky-600/10 px-4 py-2 rounded-md font-semibold text-slate-300 placeholder:text-sm placeholder:font-semibold"
placeholder="Enter your password"
/>
<div class="w-full flex flex-col justify-center items-center gap-5 mt-10">
<button class="w-full px-5 py-2 bg-sky-500 rounded-full font-semibold text-white hover:bg-sky-500/80 duration-300">Login</button>
<a href="/register" class="w-full px-5 py-2 bg-green-500 rounded-full font-semibold text-white text-center hover:bg-green-500/80 duration-300">Create an account</a >
</div>
</form>
</div>
</div>
</div>
</body>
</html>
2
Answers
You could consider:
height: 100%on the<body>viah-full, so that the immediate child<div>"gets" the height with its ownh-full.display: flex; flex-direction: columnviaflex flex-colon the immediate<div>child of the<body>to layout elements in a vertical layout.After the above two changes made, you could either:
Apply
flex-grow: 1viagrowto the<div>immediately after the<!-- Login -->comment:Or apply
margin-top: auto; margin-bottom: autoviamy-autoto the<div>immediately after the<!-- Login -->comment:You should set the height of the parent not to
h-fullbut toh-screen, so it takes up all the space on the screen (100vh). Then set a fixed height on the navbar (e.g.h-20, which is 5rem).Add a div surrounding your login form and make the height the remaining space on the screen (100vh – 5rem). Make this div
flexand setoverflow-y-autoon it to make sure it adds a scrollbar when there is not enough space.Also add
m-autoto your login div, to center the login form vertical and horizontal.Example in tailwind play.