纯文字版权信息居中用text-align: center足够；仅当需多栏布局、垂直居中或响应式堆叠时才必须用display: flex，否则易引发兼容性问题和布局干扰。
纯文字版权信息居中，text-align: center 就够了；只有当需要同时控制垂直位置、多栏分布或响应式堆叠时，才该上 display: flex ——否则反而引入兼容性风险和布局干扰。
什么时候必须用 Flex 实现底部居中
当页脚不是一行纯文本，而是包含多个区块（比如 logo + 版权文字 + 备案号），且要求它们在小屏竖排、大屏横排时，display: flex 是唯一干净可控的方案。常见错误是强行给单行文字加 flex，结果发现 justify-content: center 没效果——因为父容器没设高度，align-items: center 失效。
- 必须设
height或min-height（如min-height: 48px），否则垂直居中不成立 - 避免对
body或html直接设display: flex，容易撑满全屏导致主内容被截 -
flex-direction: column用于多行文字整体居中；flex-direction: row用于左右分栏 - Safari 9 及更早版本不支持无前缀的
flex，需加display: -webkit-flex
移动端断点下如何安全切换为竖排
用 @media (max-width: 768px) 切换 flex-direction 是最直接的方式，但要注意子元素的 margin 和 padding 在方向变化后是否仍合理。例如横排时用 margin-left 控制间距，竖排时就得清掉它，改用 margin-top 或 gap。
- 优先用
gap替代margin控制项目间距，它在column和row下行为一致 - 竖排时别依赖
align-items: flex-end做右对齐，某些老 Android WebView 会忽略 - 若内容含图标或
inline-block元素，确保vertical-align: middle配合align-items: center - 测试真机 Safari iOS 12 以下，
gap不生效，得回退到margin+:nth-child
为什么 margin: 0 auto 对版权文字无效
因为 margin: 0 auto 只对「有明确宽度 + display: block」的块级元素起作用。而版权文字通常写在 span 或未设宽的 div 里，auto 值会被浏览器直接忽略。
- 给
span加margin: 0 auto—— 完全没反应 - 想硬用？先包一层
div，再设width: fit-content+display: block+margin: 0 auto - 但
fit-content在 IE11 和部分旧安卓浏览器不支持，不如直接用text-align: center - 文字长度不确定时，固定
width易导致换行或溢出，维护成本高
真正难的不是怎么写居中代码，而是判断“要不要用 Flex”——大多数静态页底部，text-align: center 加一个 footer 标签就完成了；只有当设计稿里出现三栏、吸底、垂直居中、动态高度这些关键词时，Flex 才是必要解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
