text-align:center 对浮动元素无效，因为 text-align 只控制行内内容在块级容器中的水平对齐，而浮动元素已脱离文档流，不再受其影响。
text-align:center 对浮动元素无效，为什么？
text-align 只影响**行内内容在块级容器中的水平对齐**，不控制块级元素自身的位置。一旦子元素用了 float: left 或 float: right，它就脱离了普通文档流，变成“漂浮状态”，text-align 完全管不到它。
常见错误现象：div 里写了 text-align: center，里面放了个 float: left 的 img 或 ul，结果纹丝不动——不是居中失效，是压根没生效。
替代方案：用 flex 替代 float 实现居中
现代布局首选 display: flex，干净、可控、无副作用。把父容器设为 flex，子元素自动回归流内，justify-content: center 就能真正居中。
- 把原
float: left的子元素样式删掉（或设为float: none） - 给父容器加
display: flex和justify-content: center - 如果子元素是多行或需换行，加上
flex-wrap: wrap - 注意：
flex在 IE10+ 支持良好，但 IE9 及以下不支持——若必须兼容，不能直接切 flex
/* 原来失效的写法 */
.container { text-align: center; }
.item { float: left; width: 200px; }
<p>/<em> 改成这样 </em>/
.container { display: flex; justify-content: center; }
.item { /<em> 不需要 float </em>/ width: 200px; }兼容老浏览器：清除浮动后用 inline-block + text-align
如果必须支持 IE8/9，又不想用 JS 清除浮动，可以用 inline-block 模拟块级行为，再靠 text-align: center 居中。
立即学习“前端免费学习笔记（深入）”；
- 父容器保留
text-align: center - 子元素去掉
float，改用display: inline-block和vertical-align: top（防基线对齐错位） - 子元素之间有空格会留缝隙，可用父容器设
font-size: 0，再单独给子元素设字体大小 - 别忘了清除浮动遗留的父容器高度塌陷问题——哪怕不用 float 了，旧代码里可能还挂着
clear: both或伪元素清除，要一并清理
为什么别硬撑 float + text-align 组合？
有人试过给浮动元素加 margin: 0 auto，或者套一层 text-align: center 的 span，这些都不可靠。
-
margin: 0 auto对浮动元素无效（除非同时设width且脱离流前它本就不占满） - 浮动元素的宽度计算受父容器
padding、border影响，容易偏移 - 多个浮动元素并排时，
text-align对它们整体无作用，只能靠手动算margin-left模拟居中——响应式下立刻崩溃 - Flex 或 Grid 已成标准，继续用 float 布局，等于主动给自己埋兼容性、可维护性和调试成本的雷
真正麻烦的不是“怎么让浮动居中”，而是“为什么还在用浮动做布局”——老项目迁移时，先定位哪些地方 float 是为了清除高度、哪些是为了排列、哪些只是历史惯性，比强行修 text-align 重要得多。
