无法居中绝对位置

Question

背景与问题：

我使用 Tailwind CSS 和 Alpine.js 来创建一个简单的搜索栏，该搜索栏有一个使用

absolute

定位的下拉菜单

Codepen 链接已失效并被删除。

当我使用

relative

定位下拉菜单时，它的位置完美地符合我的要求（但拉伸了我不想要的页面的其余部分）。然而，当我将其更改为

absolute

时，虽然它不再拉伸页面，但它使下拉菜单扩展得比预期更宽。

示例：

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

absolute

更改为

relative

时看到差异

问题：

我如何使用 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>

Answer 2

对于顺风试试这个：

absolute m-auto left-0 right-0

Answer 3

答案很简单，

position:absolute

应该有一个带有

position:relative

的父div，在你的情况下，

relative

是针对body的，我认为，你需要相对于父div，即n行号25，

您也可以参考

位置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%);
}

Answer 5

最短且实用的版本：

absolute inset-0 m-auto

Answer 6

您还可以使用

grid

 和 

place-items-center

 将项目放置在中间，例如

<div class="relative">
  <div class="absolute bottom-0 left-0 right-0 top-0 grid place-items-center">
   <!-- Add your content here -->
  </div>
</div>

如果您想将项目放置在中心，您也可以使用以下类来实现

absolute left-0 right-0 grid place-items-center

<div class="relative">
  <div class="absolute left-0 right-0 grid place-items-center">
   <!-- Add your content here -->
  </div>
</div>

我在操场上创建了一个例子

https://play.tailwindcss.com/FPLV9gLqBD

Answer 7

该解决方案也可能使用

span

 标签。这会导致某些浏览器出现问题。如果您发现正在使用跨度，请尝试使用 

div

 标签。