此问题已在此处有答案：
Flexbox: center horizontally and vertically（14个回答）
2小时前关闭
我使用顺风，这里是我的html工作
<div class="bg-orange-700 h-14">
<div class="bg-blue-400 mx-auto w-40 h-4 text-center">
Start today
</div>
</div>这是我正在做的事情的全部代码
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/output.css" rel="stylesheet">
</head>
<body>
<!-- this is the main container -->
<div class="container mx-auto w-9/12 flex flex-col gap-5 items-center">
<!-- it has three flex items, the first two are just title containers -->
<div class="h-14 w-full items-center text-center text-4xl">Get more with Premium</div>
<div class="h-14 w-full text-center text-lg leading-4 text-gray-600">Members enjoy a bounty of anime perks.</div>
<div class="container mx-auto flex justify-between items-center h-screen flex-row bg-yellow-400 ">
<div class="flex flex-col bg-red-950 w-96 h-5/6 border border-gray-200 rounded-lg shadow justify-evenly" >
<div class="container bg-white w-72 h-64 mx-auto flex flex-col gap-2 justify-between">
<!-- here lies the logo and amount container -->
<div class="bg-orange-700 h-20 w-20 mx-auto">
<img src="/src/img/twitter.svg">
</div>
<div class="bg-orange-700">Fan</div>
<div class="bg-orange-700">KES 200.00/mo</div>
<div class="bg-orange-700">+ APPLICABLE TAXES</div>
<div class="bg-orange-700 h-14">
<div class="bg-blue-400 mx-auto w-40 h-4 text-center">Start today</div>
</div>
<div class="bg-orange-700 basis-1">SKIP FREE TRIAL</div>
</div>
<div class="container bg-white w-72 h-64 mx-auto ">
</div>
</div>
<div class="flex flex-col bg-green-950 w-96 h-5/6 border border-gray-200 rounded-lg shadow justify-evenly">
<div class="container bg-white w-72 h-64 mx-auto flex flex-col">
<!-- here lies the logo and amount container -->
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
</div>
<div class="container bg-black w-72 h-64 mx-auto ">
</div>
</div>
<div class="flex flex-col bg-blue-950 w-96 h-5/6 border border-gray-200 rounded-lg shadow justify-evenly">
<div class="container bg-black w-72 h-64 mx-auto">
<!-- here lies the logo and amount container -->
</div>
<div class="container bg-black w-72 h-64 mx-auto ">
</div>
</div>
</div>
</div>
</body>
</html>
我希望蓝色容器在垂直方向上位于红色容器的中心。我正在使用顺风，希望组件名称能使其在中心对齐。
1条答案
按热度按时间bvuwiixz1#
.items-center或align-items: center;在没有flex的情况下是无用的。您必须添加
.flex以使其在y轴上居中。