时间戳

首页 > 解决方案 > 无法居中绝对位置 (Tailwind.css)

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

问题描述

背景和问题：

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

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

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

例子：

您可以通过单击搜索栏右侧的下拉箭头来查看此内容。26号线换成也能看出absolute区别relative

问题：

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

标签： htmlcsstailwind-css

解决方案

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

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>

推荐阅读