我尝试使用 HTML 和 Tailwind CSS 创建一个 Netflix 登陆页面克隆。我想在英雄部分创建一个输入和按钮，我尝试使用父 div 中的 flex box、flex-col、justify-center 和 items-center 将它们居中。
问题是只有按钮居中，而输入元素保持不变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Netflix India</title>
<link rel="stylesheet" href="/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body class="font-['Poppins']">
<header class="relative bg-[url('assets/images/bg.jpg')] h-[70vh] bg-no-repeat bg-center">
<nav class="flex align-middle justify-between pt-5 px-5">
<span class="z-20">
<img class="w-32" src="assets/images/logo.svg" alt="">
</span>
<div class="z-20">
<button class="text-white text-sm rounded border border-gray-500 border-solid py-1.5 px-3">
English
</button>
<button class="text-white bg-[#e50914] py-1.5 text-sm px-3 rounded">Sign In</button>
</div>
</nav>
<div class="absolute top-0 left-0 right-0 h-[70vh] w-full opacity-60 bg-black">
</div>
<div class="h-[60%] w-[100%] flex flex-col text-center justify-center text-white px-8">
<span class="z-20 text-[28px] font-bold mb-5">
Unlimited movies, TV shows and more
</span>
<span class="z-20 text-lg mb-5">
Watch anywhere. Cancel anytime.
</span>
<span class="z-20 text-md">
Ready to watch? Enter your email to create or restart your membership.
</span>
</div>
<div class="w-full text-white flex flex-col justify-center align-middle">
<input type="text" placeholder="Email Address" class="w-[70%]">
<button>Get Started ></button>
</div>
</header>
<script src="main.js"></script>
</body>
</html>
请帮助我将输入元素置于中心
您需要添加一个100%宽度的父元素：
给你，这应该对你有用：
<header class="relative h-[70vh] bg-[url('assets/images/bg.jpg')] bg-center bg-no-repeat">
<nav class="flex justify-between px-5 pt-5 align-middle">
<span class="z-20">
<img class="w-32" src="assets/images/logo.svg" alt="" />
</span>
<div class="z-20">
<button class="rounded border border-solid border-gray-500 px-3 py-1.5 text-sm text-white">
English
</button>
<button class="rounded bg-[#e50914] px-3 py-1.5 text-sm text-white">
Sign In
</button>
</div>
</nav>
<div class="absolute left-0 right-0 top-0 z-[1] h-[70vh] w-full bg-black opacity-60"></div>
<div class="relative z-[2] flex h-[60%] w-[100%] flex-col justify-center px-8 text-center text-white">
<span class="z-20 mb-5 text-[28px] font-bold">
{" "}
Unlimited movies, TV shows and more{" "}
</span>
<span class="z-20 mb-5 text-lg"> Watch anywhere. Cancel anytime. </span>
<span class="text-md z-20">
{" "}
Ready to watch? Enter your email to create or restart your membership.{" "}
</span>
</div>
<div class="relative z-[2] flex w-full flex-col justify-center align-middle text-white">
<div class="flex w-full flex-col items-center justify-center">
<input type="text" placeholder="Email Address" class="w-[70%]" />
<button class="text-white">Get Started ></button>
</div>
</div>
</header>