使用tailwindcss时如何实现div的垂直水平居中？

问题原因 #

你当前的代码不生效是因为absolute定位的容器没有指定偏移范围，容器自身尺寸仅等于子元素<Contact />的尺寸，flex的对齐规则没有多余空间可以生效。

解决方案 #

方案1：保留absolute定位实现居中 #

给绝对定位容器添加inset-0类，让容器铺满最近的非static定位的祖先元素，再配合flex对齐即可生效：

<!-- 相对整个视口居中时直接用，相对指定父容器居中时给父容器加relative类 -->
<div class="absolute inset-0 flex items-center justify-center">
  <Contact />
</div>

方案2：普通流式布局下视口居中 #

如果不需要绝对定位，直接给父容器设置最小视口高度配合flex布局即可：

<div class="flex min-h-screen items-center justify-center">
  <Contact />
</div>

方案3：更简洁的grid实现 #

用grid布局的place-items-center可以更短的代码实现相同效果：

<div class="grid min-h-screen place-items-center">
  <Contact />
</div>

注意事项 #

• 如果需要在指定高度的父容器内居中，把上述代码里的min-h-screen替换为你需要的父容器高度类（比如h-96）即可
• 若居中效果仍不符合预期，检查<Contact />组件自身是否有额外的外边距、定位属性干扰对齐逻辑

内容的提问来源于stack exchange，提问作者larkx