float元素用transform居中常失效，因其脱离文档流且需position:relative/absolute+top/left:50%才能生效；Flexbox才是移动端居中首选方案。
float 元素用 transform: translate(-50%, -50%) 居中为什么经常失效
因为 float 会把元素拉出普通文档流，而 transform 的偏移基准是元素自身的左上角——但这个“左上角”在浮动后可能已经脱离父容器的可视范围或计算上下文。更关键的是，position: relative（或 absolute）才是 transform 居中的前提，float 和 transform 搭配属于误用组合。
- 浮动元素默认不响应
transform的居中逻辑，除非额外加position: relative - 即使加了
position: relative，top/left仍需手动设为50%，否则translate(-50%, -50%)只是把自己往左上拉一半宽高，没锚点 - 移动端 Safari 对浮动 + transform 的渲染兼容性更差，容易出现闪动或错位
真正能用 transform 居中的前提条件
必须同时满足三个条件：元素有明确的 position 值（relative / absolute / fixed），且 top 和 left 设为 50%，再用 transform: translate(-50%, -50%) 回拉。
-
position: absolute最常用：父容器需设position: relative，否则会相对于视口定位 -
position: relative适合微调：此时top: 50%是相对于自身原始位置下移 50%，再translate才有效 - 别忘了给父容器设
height或内容撑开，否则50%计算结果可能是 0
/* 正确写法示例 */
.parent {
position: relative;
height: 200px; /* 必须有高度，否则 top: 50% 无效 */
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}移动端更稳妥的替代方案：Flexbox
Flexbox 不依赖定位、不干扰文档流、无兼容性陷阱，是现代移动端居中的首选。它天然支持交叉轴和主轴对齐，一行代码就能解决浮动+transform 的多步配置问题。
-
display: flex加在父容器上，子元素自动成为 flex item -
justify-content: center控制水平居中，align-items: center控制垂直居中 - 不需要设
position，不需要算50%，也不怕浮动干扰 - iOS 9+、Android 4.4+ 全面支持，老版本可加
display: -webkit-flex
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}如果非要用 float，怎么让它看起来“居中”
float 本身没有居中能力，所谓“居中”只是视觉模拟。常见做法是用 margin 手动推，或配合 text-align: center 配合 inline-block 替代 float。
立即学习“前端免费学习笔记（深入）”；
-
float: left+margin: 0 auto无效：块级浮动元素不响应automargin - 想让浮动块居中，只能用
text-align: center在父容器上，再把子元素设为display: inline-block - 或者放弃
float，改用display: table-cell+vertical-align: middle，但语义和维护性都差
真正需要 float 的场景（比如文字环绕）极少出现在移动端，多数时候是历史代码残留。这时候最省事的做法是：删掉 float，换 Flexbox。
