無法居中絕對 position (Tailwind.css)

Question

背景與問題：

我正在使用 Tailwind CSS 和 Alpine.js 作為一個簡單的搜索欄，它有一個使用absolute定位的下拉列表

代碼筆在這里： https://codepen.io/jdonline/pen/YzXpbyJ

當我 position 使用relative下拉菜單時，它的位置完全符合我的要求（但拉伸了我不想要的頁面的 rest）。 但是，當我將其更改為absolute時，雖然它不再拉伸頁面，但它會將下拉列表擴展得比預期的要寬。

例子：

您可以通過單擊搜索欄右側的下拉箭頭來查看。 您還可以在第 26行將absolute更改為relative值時看到差異

問題：

我怎樣才能使用 Tailwind.css、position 下拉菜單，使其具有absolute的 position，但不會比搜索欄更寬？

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

對於 Tailwind，試試這個：

absolute m-auto left-0 right-0

Answer 3

答案很簡單， position:absolute應該有一個帶有position:relative的父 div，在你的情況下， 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%);
}