使用Flex布局无法垂直居中网页卡片，求技术解决方案

出现这种情况90%以上的原因是你的Flex容器本身没有占据足够的垂直空间——align-items: center是基于容器自身的高度来垂直居中内部元素的，如果容器高度只包裹内容，那自然看不出垂直居中效果。

常见的修复步骤：

• 先确保Flex容器的父元素（比如html和body）占满整个视口高度，浏览器默认body高度是由内容撑开的：

  html, body {
    height: 100%;
    margin: 0; /* 去掉默认边距，避免出现滚动条 */
  }
  

• 给Flex容器设置min-height: 100vh（vh是视口高度单位，100vh等于整个浏览器窗口高度，比height:100%更灵活，能适配内容超过视口的场景）：

  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  

同时排查几个容易忽略的细节：

• 容器有没有被设置position: absolute或float，这类属性会干扰Flex布局的正常生效
• 用浏览器开发者工具（F12）查看容器的实际高度，检查是否被padding或margin挤压了可用空间

至于VSCode实时预览插件的问题：一般不会影响布局逻辑，大概率是缓存导致的显示异常，你可以刷新预览页或重启插件试试，但优先从代码的高度设置入手排查。

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