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

【问题标题】：Can't center absolute position (Tailwind.css)无法居中绝对位置 (Tailwind.css)
【发布时间】：2020-06-07 06:54:22
【问题描述】：

背景和问题：

我正在使用 Tailwind CSS 和 Alpine.js 来创建一个简单的搜索栏，该搜索栏有一个使用 absolute 定位的下拉菜单

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

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

示例：

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

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

问题：

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

【问题讨论】：

标签： html css tailwind-css

【解决方案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>

【讨论】：

【解决方案2】：

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

添加这个实用程序类它可以完美运行：

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

【讨论】：

【解决方案3】：

答案很简单，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">

【讨论】：