使用 Tailwind CSS 实现水平和垂直居中对齐的方法

在前端开发中，可以使用 Tailwind CSS 轻松实现水平和垂直居中对齐。

方法 1：使用 flex 布局

这种方法最常用且灵活，可以适应各种情况。

<div class="flex items-center justify-center h-screen">
  <div>
    <!-- 这里是内容 -->
    Centered content
  </div>
</div>

• flex：将父元素设为 Flexbox 布局。
• items-center：垂直居中对齐子元素。
• justify-center：水平居中对齐子元素。
• h-screen：将父元素高度设为屏幕高度（可以根据实际需要调整）。

方法 2：使用 grid 布局

Grid 布局也可以轻松实现居中对齐。

<div class="grid place-items-center h-screen">
  <div>
    <!-- 这里是内容 -->
    Centered content
  </div>
</div>

• grid：将父元素设为 Grid 布局。
• place-items-center：在水平方向和垂直方向上都居中对齐子元素。
• h-screen：将父元素高度设为屏幕高度。

方法 3：使用绝对定位

如果父容器有特定的高度，可以使用绝对定位来实现居中。

<div class="relative h-64">
  <div class="absolute inset-0 flex items-center justify-center">
    <!-- 这里是内容 -->
    Centered content
  </div>
</div>

• relative：将父元素设为相对定位，以便子元素可以相对于父元素进行定位。
• absolute：将子元素设为绝对定位。
• inset-0：将子元素的上下左右都设为 0，使其填满父元素。
• flex、items-center 和 justify-center：使内容在父元素内水平和垂直居中。