flex垂直+水平居中需设父容器display: flex、明确高度（如min-height: 100vh），并配合justify-content: center和align-items: center；主轴方向由flex-direction决定，需确保内容不脱离文档流。

用 Flex 实现垂直+水平居中，关键不是“堆属性”，而是理解主轴和交叉轴的关系，并确保容器具备可感知的高度。

父容器必须设为 flex 容器

所有 flex 对齐属性只在 display: flex 的直接父容器上生效。子元素本身无需加 flex，也不靠 margin 或 text-align 来凑。

• 给包裹目标元素的父级加 display: flex
• 避免写在 body 或未设尺寸的 div 上——没高度就看不到垂直居中效果
• 如果目标是单个块（比如登录框、卡片），父容器建议设 min-height: 100vh 或明确高度

配对使用 justify-content 和 align-items

这两个属性必须一起用，但方向取决于 flex-direction。默认 row 时：

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

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

下载

• justify-content: center → 控制水平居中（主轴是水平方向）
• align-items: center → 控制垂直居中（交叉轴是垂直方向）

若设了 flex-direction: column，角色互换：此时 justify-content 管垂直，align-items 管水平。

注意内容高度是否撑开容器

如果父容器内只有几行文字或空 div，它可能实际高度只有 20px，那 align-items: center 就没表现空间。

• 临时加 min-height: 300px 或 min-height: 100vh 验证效果
• 避免依赖 content-height 自动撑高，尤其在移动端或响应式布局中
• 若内部是图片或表单，确认它们没设置 float 或 position: absolute，否则会脱离 flex 流

不需要额外包裹或 hack 写法

别用 margin: auto + position: absolute 这类老方法，也无需给子元素设 display: inline-block 配合 text-align。

• Flex 居中天然支持块级、行内、图片、表单等各种元素类型
• 子元素是 <span></span> 时，若需独占一行或更好控制，可加 display: block，但非必须
• 多子元素并排居中？默认就是横向居中；想纵向堆叠再居中？改 flex-direction: column 即可

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