footer文字水平居中首选text-align: center，因其轻量、兼容IE6+且专管块级容器内行内内容；若含块级子元素则需flex或inline-block方案。
直接给 footer 或版权 <p> 设置 text-align: center 就够了，前提是它里面放的是文字、<span>、<a> 这类内联内容。
为什么 text-align: center 对版权文字最常用
网页底部的版权信息（比如 © 2026 MySite）几乎总是纯文本或简单内联链接，属于「内联元素」。浏览器默认把它们当作文本流处理，所以父容器设 text-align: center 是最轻量、兼容性最好（IE6+ 都支持）、且无需额外 HTML 结构的方式。
- 别在
footer上直接写margin: 0 auto——它没固定宽度，块级元素会占满整行，auto失效 - 如果版权区域里混了图标（如 SVG）、按钮或多个区块，就不再是纯内联流，这时得换方案
- 注意：
text-align只影响子元素中的内联内容，对子div、ul等块级子元素无效
footer 里有多个块级元素时怎么居中
比如版权文字 + 一排社交图标 <div class="social"> + 隐私政策链接列表，它们各自是块级元素，text-align 不起作用。这时要统一“降级”成内联流或用弹性布局：
- 给每个子元素加
display: inline-block，再在footer上设text-align: center - 更推荐：给
footer设display: flex，然后justify-content: center——所有子元素（无论块/内联）自动水平居中 - 避免用
float+text-align，容易触发清除浮动问题，且语义不清
用 Flex 居中时容易漏掉的关键点
display: flex 看起来一行解决，但实际常踩坑：
立即学习“前端免费学习笔记（深入）”；
- 父容器（
footer）必须有明确的宽度上下文，否则justify-content: center在某些老版本 Safari 或 IE11 中可能表现异常 - 如果
footer高度靠内容撑开，没问题；但如果设了height: 60px，又希望文字垂直居中，就得加align-items: center - Flex 子项默认不换行，多个长链接挤在一起？加
flex-wrap: wrap并配合text-align: center控制换行后对齐 - 别给子元素单独设
margin: 0 auto——在 Flex 容器里，这会被忽略
真正麻烦的不是居中本身，而是版权区域结构变化后，原先的 text-align 突然失效，而开发者还在检查 margin 是否写错。先看内容类型，再选方法，比背口诀管用。
