不能居中绝对位置 (Tailwind.css)

Question

背景与问题：

我正在使用 Tailwind CSS 和 Alpine.js 作为一个简单的搜索栏，该搜索栏的下拉列表使用 absolute

Codepen 在这里：https ://codepen.io/jdonline/pen/YzXpbyJ

当我使用 定位下拉菜单时relative，它会按照我想要的方式完美定位（但会拉伸我不想要的页面的其余部分）。但是，当我将其更改为 时absolute，虽然它不再拉伸页面，但它会将下拉菜单扩展得比预期的更宽。

例子：

您可以通过单击搜索栏右侧的下拉箭头来查看此信息。您还可以看到差变更时absolute要relative在第26行

题：

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

Answer 1

对于 Tailwind 试试这个：

absolute m-auto left-0 right-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>

Answer 3

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

你也可以参考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">

Answer 4

我在 Tailwind Github 个人资料的这个提案中找到了答案。 https://github.com/tailwindlabs/tailwindcss/discussions/1531

添加这个实用程序类它完美地工作：

.inset-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}