flex水平垂直居中需父容器设display: flex、justify-content: center、align-items: center及明确高度（如100vh）；grid则用place-items: center更简洁，但兼容性受限；margin: auto垂直居中仅在绝对定位+四边为0时生效。
flex 实现水平
垂直居中
：最简写法与常见陷阱
用
居中，核心是父容器设
和
。但要注意：父元素必须有明确高度（比如
），否则子元素会随内容撑高，看起来没居中。
父容器需设置
，且不能是
（否则高度行为异常）
子元素不能设
再叠加
，会导致行为冲突
若子元素是绝对定位的，
居中完全失效——flex 只作用于 flex item，不处理脱离文档流的元素
grid 实现居中：一行代码够用，但兼容性要看场景
配合
是最简洁的写法，等价于
+
。它对单个子元素居中非常直接，但注意：该属性只影响 grid container 的直接子项，嵌套层级多时容易误判作用对象。
在 Firefox、Chrome 85+、Safari 14.1+ 支持良好；IE 完全不支持
如果父容器已有
或显式行列定义，
仍生效，但可能被
/
覆盖
不要和
混用：
控制的是整个 grid track 的对齐，不是 item
为什么不用 margin: auto？哪些情况它会失效
在块级元素上仅能实现水平居中；要垂直居中，必须满足三个条件：父容器为
且有固定高度、子元素为绝对定位、同时设
，再加
才生效。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
常见错误：给普通
直接写
并期待垂直居中 → 不生效
Flex 或 Grid 容器里的子元素，
会沿主轴/交叉轴拉伸，行为不可控，建议避免混用
在 table-cell 中
配合
虽可行，但语义混乱、维护成本高，已不推荐
实际项目中怎么选：看浏览器支持和嵌套复杂度
如果目标环境包含 IE11，
是更稳妥的选择（需加
前缀，且避免使用
）；若只需支持现代浏览器，
的
更干净。但遇到多层嵌套或动态插入内容时，flex 的
更容易受父级
影响，而 grid 的
行为更稳定。
立即学习
“
前端免费学习笔记（深入）
”；
不要为了“炫技”强行统一用 grid：已有 flex 布局的模块，再套一层 grid 容器反而增加渲染负担
动画场景下，flex 的
在过渡中更平滑；grid 的
在改变容器尺寸时重排更果断
最容易被忽略的一点：无论 flex 还是 grid，都要求父容器本身在视口中有确定的尺寸边界，否则居中只是“看起来对”，一缩放或响应式切换就偏移
display: flexjustify-content: centeralign-items: centerheight: 100vhdisplay: flexinline-flexmargin: autojustify-contentflex
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 关键：必须有高度 */
}
display: gridplace-items: centerjustify-items: centeralign-items: centerplace-itemsgrid-template-areasplace-itemsjustify-selfalign-selfplace-contentplace-content
.container {
display: grid;
place-items: center;
height: 100vh;
}
margin: autodisplay: blocktop: 0; bottom: 0; left: 0; right: 0margin: autodivmargin: automargin: autovertical-align: middletext-align: centerflex-webkit-gapgridplace-itemsalign-itemsflex-directionplace-itemsalign-itemsplace-items