Flex容器内absolute子元素不居中，因脱离flex流致justify-content/align-items失效；需父容器设position: relative，再用top:50%、left:50%配合transform: translate(-50%,-50%)实现精准居中。
Flex容器里子元素设了
却不居中？
因为
会让元素完全脱离flex布局的控制流，
和
对它彻底失效。此时它只认最近的定位上下文（比如父容器的
），然后按
/
等偏移计算位置——而这些值默认是相对于父容器左上角的，不是中心。
+
为什么只是“偏了一半”？
这两个声明只是把元素的**左上角**挪到父容器中心点，不是让整个元素视觉居中。常见现象：元素右下角伸出视口、看起来明显偏右偏下。
必须补上
，才能以自身宽高为基准，向左、向上各回拉一半
如果漏掉
，哪怕父容器是
也毫无作用
的百分比是相对于元素自身尺寸，不是父容器——所以宽高动态变化时依然可靠
Flex容器本身加
会怎样？
这是典型的概念混淆：flex容器的作用是排布它的子元素，它自己是否居中，得由它的父容器决定。给flex容器自己加
，等于主动放弃flex带来的布局能力，还可能引发z-index、层叠上下文等额外问题。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
想让一个flex容器（比如
）在页面中居中？应该操作它的父容器，而不是它自己
父容器用
+
+
最干净
若父容器已用
，且需要脱离文档流（如弹窗），再对flex容器设
+
移动端用
居中会错位？
iOS Safari地址栏收起/展开时，
不会实时响应，导致
计算出的位置偏移。这不是flex或transform的问题，而是viewport高度不稳定。
立即学习
“
前端免费学习笔记（深入）
”；
优先改用
，现代浏览器支持良好，能响应地址栏变化
老iOS需降级方案：监听
事件+JS动态设高度，但多数项目用
加一点容错更实际
别依赖
或
来“修复”，这会破坏可访问性
position: absoluteposition: absolutejustify-contentalign-itemsposition: relativetoplefttop: 50%left: 50%transform: translate(-50%, -50%)transformdisplay: flextransformposition: absoluteposition: absolute.boxdisplay: flexjustify-content: centeralign-items: centerposition: relativeposition: absolutetransformheight: 100vh100vhalign-items: centermin-height: 100dvhresizepadding-top: env(safe-area-inset-top)zoomuser-scalable=no