无法居中绝对位置 (Tailwind.css)

Question

背景与问题：

我将 Tailwind CSS 和 Alpine.js 用于一个简单的搜索栏，该搜索栏的下拉菜单使用 absolute

代码笔在这里： https ://codepen.io/jdonline/pen/YzXpbyJ

当我使用 relative 定位下拉菜单时，它的位置完全符合我的要求（但拉伸了我不想要的页面的其余部分）。但是，当我将其更改为 absolute 时，虽然它不再拉伸页面，但它会将下拉列表扩展得比预期的要宽。

例子：

您可以通过单击搜索栏右侧的下拉箭头来查看。您还可以在 第 26 relative absolute 时看到差异

题：

我如何使用 Tailwind.css 定位下拉菜单，使其具有 absolute 位置，但不会比搜索栏更宽？

原文由 John Cliven 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

答案很简单， position:absolute 应该有一个父 div position:relative ，在你的情况下 relative 是给身体的，我认为你需要相对的，父 div 是 n 行号 25，

您也可以参考 Position CSS

 <div x-show.transition.opacity.duration.700ms="open" class="relative" >
    <div class="absolute inset-x-0 shadow-xl bg-white w-3/4 md:w-2/5 mx-auto -mt-1 rounded-lg rounded-t-none">

原文由 Akhil Aravind 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

仅使用顺风，您可以使用以下类

absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2

所以，就像

<div class="relative">
    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"> </div>
<div>

原文由 Adharsh M 发布，翻译遵循 CC BY-SA 4.0 许可协议