小程序页面居中首选flex布局，父容器设display: flex、justify-content: center、align-items: center并明确高度；text-align: center适用于文本图片水平居中；避免margin: 0 auto和vertical-align。
小程序页面里 HTML 元素居中，本质还是 CSS 居中，但受限于小程序的渲染机制（WebView 或自研渲染引擎）、基础库版本、以及 view / text 等组件的默认 display 行为，很多网页端“直接能跑”的写法会失效。核心结论：优先用 Flex 布局，禁用 margin: 0 auto 对非定宽 view，别信 vertical-align。
小程序里 margin: 0 auto 为什么经常不生效
小程序的 view 组件在多数基础库版本中默认是 display: block，看似满足条件，但实际踩坑点密集：
- 父容器若用了
display: flex（比如页面级scroll-view或自定义容器），margin: 0 auto直接被忽略 - 子
view没设width（哪怕写了width: 80%），在某些安卓 WebView 下计算异常，左右 margin 不均分 -
text、image等组件默认是display: inline或inline-block，对margin: 0 auto完全无感 - 真机调试时发现居中偏移，大概率是父容器有隐式
padding或border，而开发者工具没渲染出来
display: flex 是小程序里最稳的居中方案
小程序基础库 2.0+ 全面支持 Flex，且兼容性远好于 Grid（部分低版本 iOS 不支持 place-items）。关键不是“怎么写”，而是“写在哪”：
- 居中目标是单个元素？把
display: flex; justify-content: center; align-items: center;加到它的**直接父容器**上，不是目标元素自己 - 父容器必须有明确高度才能看到垂直居中效果，比如
min-height: 100vh或height: 300rpx；仅靠height: auto时align-items无效 - 避免在
page根节点或scroll-view上直接写display: flex—— 它可能影响内部滚动逻辑，建议包一层view class="container" - 如果子元素是
text，记得加white-space: nowrap防止换行破坏水平居中
文本和图片在小程序里水平居中别用 Flex
纯文本或单张图片水平居中，最轻量、最可靠的方式仍是父容器加 text-align: center：
-
text-align: center对text、image、icon组件都有效，且不依赖父容器 display 类型 - 不要给
text自己设text-align—— 它只作用于其**内联子内容**，自身对齐由父容器控制 - 如果图片周围有空白导致“看起来没居中”，检查是否多了一个空格、换行符，或
image外层套了未清除的view - 需要垂直居中？别碰
line-height—— 小程序里line-height对image无效；改用 Flex 父容器
绝对定位 + transform 适合弹窗类场景
模态框、toast、遮罩层这类脱离文档流的元素，用 position: absolute 更可控：
- 父容器必须设
position: relative，否则top: 50%会相对整个 viewport 计算，滚动时错位 - 子元素设
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 不要用
margin-top: -XXrpx替代transform—— 子元素宽高一变就得重算，维护成本高 - 注意可访问性：绝对定位元素需手动加
aria-hidden="true"或管理焦点，否则屏幕阅读器可能跳过
小程序里居中最容易被忽略的点：没有统一处理「父容器尺寸来源」。Flex 要高度才显垂直居中，text-align 要父容器宽度才显水平居中，而很多开发者直接在 WXML 里写 <view></view>，CSS 却忘了给它撑开空间 —— 结果就是“代码写了，但啥也没居中”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
