Tailwind中子元素高度失效致表单无法垂直居中问题

我最近在做一个应用，想要实现表单垂直居中的效果，已经在tailwind.config.js里把minHeight.screen配置成了calc(100vh - 296px)（用来扣除页眉和页脚的高度），主容器<main>使用了min-h-screen类，这部分看起来是正常的。但当我给子元素<section>加上h-full类，想让它占满父容器高度时，子元素根本没撑开，导致表单没法实现垂直居中。

相关代码 #

Tailwind配置代码

module.exports = {
  purge: [],
  theme: {
    minHeight: {
      screen: 'calc(100vh - 296px)',
    },
    fontFamily: {
      title: ['Righteous', 'sans-serif'],
      body: ['Montserrat', 'sans-serif'],
    },
  },
  variants: {},
  plugins: [],
}

HTML代码（Laravel Blade）

<section class="container mx-auto h-full px-6 p-10">...</section>

布局代码

<!DOCTYPE html>...
<main id="app" class="min-h-screen">
  @yield('content')
</main>...

问题原因与解决办法 #

为什么h-full不生效？ #

核心问题在于**min-h-screen是最小高度属性**：当<main>内部的内容高度小于你配置的calc(100vh - 296px)时，<main>的实际高度是由内容决定的，而不是那个最小高度值。这时候给子元素加h-full，它只会继承<main>的实际内容高度，自然没办法撑满你期望的高度，垂直居中也就无从谈起。

两种解决思路 #

1. 用Flex布局直接实现居中（推荐）

这是Tailwind中实现垂直居中最直观的方式，不需要纠结高度继承的问题：
把<main>的类修改为min-h-screen flex items-center justify-center，这样不管内部内容高度多少，都会自动在垂直和水平方向居中。

修改后的布局代码：

<!DOCTYPE html>...
<main id="app" class="min-h-screen flex items-center justify-center">
  @yield('content')
</main>...

对应的<section>可以去掉h-full，保留其他样式即可：

<section class="container mx-auto px-6 p-10">...</section>

如果需要限制<section>的宽度，直接给它加w-full max-w-md这类类就行，完全不影响居中效果。

2. 强制让<main>的高度等于配置的最小高度

如果你一定要通过高度继承的方式实现，可以在Tailwind配置中同时添加height.screen的配置，让h-screen也使用你自定义的高度值：

module.exports = {
  purge: [],
  theme: {
    minHeight: {
      screen: 'calc(100vh - 296px)',
    },
    height: {
      screen: 'calc(100vh - 296px)', // 新增这一行
    },
    fontFamily: {
      title: ['Righteous', 'sans-serif'],
      body: ['Montserrat', 'sans-serif'],
    },
  },
  variants: {},
  plugins: [],
}

然后把<main>的类改成h-screen（或者min-h-screen h-screen，确保高度不会小于配置值），这时候<section>的h-full就能继承<main>的高度，撑满容器后你再用Flex或者Grid来实现表单的垂直居中。

内容的提问来源于stack exchange，提问作者Mathéo Zeller