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

Question

背景与问题：

我正在使用 Tailwind CSS 和 Alpine.js 作为一个简单的搜索栏，它有一个使用 absolute

定位的下拉菜单

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

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

示例：

您可以通过单击搜索栏右侧的下拉箭头来查看。您还可以在 第 26 行

上将 absolute 更改为 relative 时看到差异

问题：

如何使用 Tailwind.css 定位下拉菜单，使其具有 absolute 的位置，但不会超出搜索栏的宽度？

Answer 1

答案很简单，position:absolute 应该有一个 parent div 和 position:relative，在你的情况下 relative 是 body 我想，你需要相对于 parent 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">

Answer 2

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

添加此实用程序 class 它完美运行：

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

Answer 3

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

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 4

对于 Tailwind，试试这个：

absolute m-auto left-0 right-0

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

Can't center absolute position (Tailwind.css)

html

css

tailwind-css