flex垂直居中需父容器有明确高度且img设vertical-align:middle或display:block；ie11存在align-items兼容问题，需额外测试或改用column+margin:auto方案。

Flex容器必须有明确高度才能让 align-items: center 垂直居中生效

很多人写完 display: flex 和 align-items: center，发现文字和图片还是贴着顶部——根本原因是父容器没设高度，浏览器按内容撑开，align-items 没有“可居中的空间”可作用。

常见错误现象：align-items: center 看似没反应，检查 computed styles 会发现父元素 height 是 auto。

• 要么给父容器设固定高，比如 height: 200px
• 要么用 min-height 配合内容自适应，更稳妥
• 如果父容器是全屏卡片或模态框，直接用 height: 100vh 也行，但注意移动端 Safari 的 vh 不稳定，建议加 min-height: 100vh 回退

img 默认是内联元素，不设 vertical-align 会导致底部留白

即使 Flex 居中了，图片下方常有一小条空白，文字看起来“偏高”——这是 img 作为 inline 元素默认对齐基线（baseline）导致的，和 Flex 的 align-items 无关，但会干扰视觉判断。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• 最简单解法：给 img 加 vertical-align: middle
• 或者直接设 img { display: block }，彻底脱离 inline 流
• 不推荐靠 font-size: 0 或负 margin 补，容易在不同字号下失效

文字换行或长文本时，align-items: center 仍有效，但需防溢出

单行文字居中很稳，但说明文字变多、换行后，如果容器高度不够，文字会被截断或撑开布局——align-items 只管“交叉轴对齐”，不管“内容是否溢出”。

• 加 word-break: break-word 或 overflow-wrap: break-word 防止单词撑破容器
• 若需严格限制高度，配合 display: -webkit-box + -webkit-line-clamp 截断多行文本
• 别只依赖 align-items 就以为万事大吉，它不解决内容适配问题

IE11 对 align-items: center 的兼容性有坑

IE11 支持 Flex，但对 align-items 在某些嵌套结构下表现异常，尤其当子元素含 min-width 或 flex-shrink: 0 时，可能完全不居中。

• 优先测试真实 IE11 环境，不能只信 caniuse
• 临时方案：改用 justify-content: center + flex-direction: column，再用 margin: auto 居中内容块
• 如果项目已放弃 IE，这步可跳过；但凡还有企业用户，就得验

Flex 垂直居中看着简单，实际卡点都在“容器高度是否真实存在”和“图片默认 inline 行为”这两处。漏掉任一，就容易花半小时调样式却看不出毛病在哪。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！