在Tailwind CSS中如何实现CSS垂直居中布局？-css教程-PHP中文网

items-center 单独无效，因它仅控制 flex 交叉轴对齐，需配合 flex 和明确高度（如 min-h-screen）才生效；子元素建议设 block，最稳妥写法是 flex items-center justify-center 同时作用于有可测高度的父容器。

在tailwind css中如何实现css垂直居中布局？

只加 items-center 不会垂直居中，必须配合 flex 和父容器明确高度（比如 min-h-screen）才生效。

为什么 `items-center` 单独没反应？

它只是控制 flex 容器的交叉轴对齐，本身不启用 flex 布局。浏览器看到 items-center 但没 flex 类，就当普通 class 忽略掉。

没加 flex → 样式完全不生效
父容器高度是 auto（比如没设 h-screen 或 min-h-screen）→ 交叉轴没“可居中的空间”，即使生效也看不出效果
子元素是 inline 元素（如 span）→ items-center 对齐行为不稳定，建议加 block 显式声明

最稳妥的写法：`flex items-center justify-center`

三个类必须同时作用于同一个父容器，且该容器要有可测量的高度范围。默认 flex 等价于 flex-row，所以：

justify-center 控制水平居中（主轴）
items-center 控制垂直居中（交叉轴）
加 min-h-screen 比 h-screen 更安全：防内容少时高度塌缩

示例：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

<div class="flex items-center justify-center min-h-screen">
  <div class="bg-blue-200 p-4">我被垂直+水平居中了</div>
</div>

只想要垂直居中，不要水平居中？

不能只删掉 justify-center——默认 justify-start 会让内容贴左，容易误判“没居中”。要明确控制水平对齐：

靠左：加 justify-start
靠右：加 justify-end
两端对齐：加 justify-between
如果子元素宽度是 100%，justify-start 和 justify-center 视觉上一样，容易漏掉问题

替代方案及关键限制

place-items-center 更简洁，但它要求父容器是 grid（必须加 grid 类），否则无效；inset-0 m-auto 要求子元素有明确宽高，否则垂直方向不生效；absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 不依赖宽高，但父容器必须设 relative。

最容易被忽略的是：所有方案都依赖父容器提供可测量的交叉轴尺寸。没高度，再全的 class 也动不了。