如何用Flexbox使登录容器占剩余高度并垂直居中（Tailwind CSS）

问题根源：

• 直接给元素加h-full会让它继承父级高度，但如果父级没有明确的高度约束，或者内容叠加后超过视口，就会出现溢出和滚动条
• 原来的布局里，登录区域用了h-full，会把导航栏的高度也算进自身高度里，导致整体高度超过视口，同时垂直居中的align-items因为父级高度计算错误无法生效

解决办法：

• 给最外层容器设置min-h-screen flex flex-col，让容器高度至少占满视口，并且子元素垂直排列
• 导航栏保持原有样式，不用额外调整高度
• 登录区域容器改用flex-1 flex justify-center items-center，flex-1会让它自动占据导航栏下方的所有剩余空间，这样就能在剩余高度里实现垂直+水平居中

修改后的完整代码：

<!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>
  <style>
    /* 移除原来的自定义高度设置，Tailwind的min-h-screen足够处理视口高度 */
    body {
      overflow-x: hidden;
    }
  </style>
</head>
<body class="antialiased text-slate-400 bg-slate-900">
  <!-- 最外层容器改为min-h-screen flex-col -->
  <div class="min-h-screen flex flex-col">
    <!-- 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区域用flex-1占据剩余空间 -->
    <div class="flex-1 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>

这样修改后，登录容器会始终在导航栏下方的剩余视口高度里居中，调整窗口大小时不会溢出，也不会出现多余的滚动条，和谷歌登录页面的布局逻辑一致。

内容的提问来源于stack exchange，提问作者Galbert