用
最省心，但父容器得设高
现代布局里，
是最直接的解法，前提是父容器有明确高度（比如
或固定像素值），否则子
垂直居中
会“失效”——它其实居中了，但父容器自身高度塌缩，视觉上没效果。
实操建议：
给父容器加
、
（水平）、
（垂直）
确保父容器有高度：不能依赖内容撑开，得显式设置
或
如果父容器是
或
，记得先清掉默认
，不然可能有白边
+
兼容老浏览器
IE10+ 都支持，比
兼容范围更广。核心是把子元素绝对定位到父容器四边中心，再用
回拉自身宽高的一半。
常见错误现象：
立即学习
“
前端免费学习笔记（深入）
”；
父容器没设
→ 子元素会相对于
定位，跑偏
忘了写
→ 元素左上角顶在父容器中心，不是整体居中
父容器没设宽高，或子元素宽高不固定 →
仍生效，但视觉容易误判
示例关键代码：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
别碰
+
这个组合
很多人试过
，以为能居中。它确实能在某些条件下工作，但极其脆弱：
必须同时指定子元素的
和
（不能是
或
）
父容器得是
或非
在 Flex 或 Grid 父容器里完全不生效
Firefox 对
在绝对定位中的行为曾有兼容差异，现在虽统一，但没必要赌
Grid 布局一行搞定，但得确认项目环境
是最简洁的方案：
直接水平垂直居中，连
和
都不用拆开写。
使用场景和限制：
适合现代项目（Chrome 60+/Firefox 63+/Safari 10.1+），但 IE 完全不支持
父容器不需要显式设高，只要内容或最小尺寸能体现出来就行
如果父容器本身是 Grid 容器且已有其他子项，
会影响全部子项，注意作用域
一句话代码：
实际用哪个，取决于你能不能控制父容器高度、要不要兼容 IE、以及团队对 CSS 新特性的接受度。最常被忽略的是：**父容器的高度来源，往往比居中写法本身更关键**。
display: flexdisplay: flexheight: 100vhdivdisplay: flexjustify-content: centeralign-items: centerheightmin-heightbodyhtmlmarginposition: absolutetransformflextransform: translate(-50%, -50%)position: relativebodytransformtranslateparent { position: relative; height: 400px; }
child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }margin: autoposition: absolutetop: 0; bottom: 0; left: 0; right: 0; margin: auto;widthheightautomax-contentposition: relativestaticmargin: autodisplay: gridplace-items: centerjustify-contentalign-itemsplace-items.parent { display: grid; place-items: center; }