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

Question

背景与问题:

我正在使用 Tailwind CSS 和 Alpine.js 来创建一个简单的搜索栏，该搜索栏的下拉菜单使用 absolute
此处编码:https://codepen.io/jdonline/pen/YzXpbyJ

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

示例:

您可以通过单击搜索栏右侧的下拉箭头来查看此内容。更改 absolute 时也可以看到区别至relative在 26号线

问题:

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

Answer 1

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

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>