如何解决尾风中心绝对要素
我想在客户端按下登录按钮时在页面中间创建一个小的登录弹出卡。我设法创建了卡本身，并给了.absolute z-10以使其位于其他内容的顶部。我还用.relative将其包装在容器div中，以便能够定位卡。我的问题是我无法将其定位在中间。例如，如果我添加.right-0，它可以工作，但是我想将其放置在中间，而我在文档中找不到关于它的任何内容。此外，如何为我的卡增加64的高度？
我的代码：
index.html
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Jófogás</title>
<link
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<!-- header section -->
<header class="bg-white flex">
<div class="w-3/6">
<img
class="h-12 m-4"
src="./logo_img/jofogas_logo_original.jpg"
alt="jofogas_logo_original"
/>
</div>
<div class="mx-6 my-6 w-3/6 text-right">
<button class="bg-orange-500 rounded py-2 px-4 text-white">
Belépés
</button>
</div>
</header>
<!-- login card -->
<div class="relative">
<div class="absolute z-10 items-center right-0">
<div
id="login-card"
class="w-56 h-64 text-center bg-orange-500 rounded-lg"
></div>
</div>
</div>
<!-- search bar -->
<div class="bg-gray-200 rounded-lg mx-10 md:pt-10" id="search-container">
<div class="text-center text-4xl hidden md:block" id="main-text">
Hirdess vagy vásárolj a Jófogáson!
</div>
<div class="py-10 text-center">
<input
class="w-5/6 md:w-3/6 md:h-12"
id="search-bar"
type="text"
placeholder="Mit keresel?"
/>
<i class="fa fa-search icon"></i>
</div>
</div>
<div class="text-center">
<button
class="bg-green-500 rounded py-4 px-8 md:py-8 md:px-16 text-white text-xl md:text-2xl my-10"
>
Hirdetésfeladás
</button>
</div>
</body>
</html>
解决方法
试试这个：
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
...
</div>
您可以将flexbox与items-center和justify-center一起使用，以使其完全适合屏幕中心。为此，您需要将高度和宽度设置为相对于整个屏幕居中的100％。检验是否可行：
<!-- login card -->
<div class="fixed h-full w-full flex items-center justify-center bg-opacity-50 bg-gray-700">
<div class="z-10">
<div id="login-card"
class="w-56 h-64 text-center bg-orange-500 rounded-lg"
></div>
</div>
</div>
请参见示例输出here。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。