tailwind的垂直对齐和水平对齐

本人github

垂直居中对齐

在Tailwind CSS中，flex和items-center是用于布局和对齐的实用程序类。

• flex: 这个类设置元素的display属性为flex。这允许你使用Flexbox布局模型来布局和对齐子元素。

• items-center: 这个类用于在Flexbox容器中垂直居中对齐子元素。它设置CSS的align-items属性为center。

当你将这两个类组合在一个元素上时，这个元素会变成一个Flexbox容器，并且其所有直接子元素会在垂直方向上居中对齐。

示例：

<div class="flex items-center">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

在这个例子中，<div>元素是一个Flexbox容器，其中的三个子<div>元素会在垂直方向上居中对齐。

这种组合在创建水平布局时非常有用，特别是当你想要在容器内垂直居中对齐子元素时。

水平对齐

在Tailwind CSS中，水平对齐通常使用justify-*类来实现，这些类会设置CSS的justify-content属性。以下是一些常用的justify-*类：

• justify-start: 子元素向容器的开始位置对齐（默认行为）。
• justify-center: 子元素在容器中水平居中。
• justify-end: 子元素向容器的结束位置对齐。
• justify-between: 子元素平均分布在容器中，第一个元素在开始位置，最后一个元素在结束位置。
• justify-around: 子元素平均分布在容器中，两侧的空间相等。
• justify-evenly: 子元素平均分布在容器中，所有的空间（包括两侧）都相等。

这些类通常与flex类一起使用，以创建一个Flexbox容器。

示例：

<!-- 子元素在容器中水平居中 -->
<div class="flex justify-center">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- 子元素平均分布在容器中 -->
<div class="flex justify-between">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

在第一个例子中，所有子元素都会在容器中水平居中。在第二个例子中，第一个子元素会在容器的开始位置，最后一个子元素会在容器的结束位置，其余子元素会平均分布在它们之间。