底部版权栏必须用text-align:center配合块级容器实现居中，且不能使用position:absolute或固定宽高，否则会在小屏或横屏时错位、截断或溢出；正确做法是将语义化footer标签置于HTML末尾，仅用text-align、padding和流式字体控制样式。
底部版权文字必须用 text-align: center + 块级容器，且不能依赖 position: absolute 或固定宽高——否则在小屏或横屏设备上会错位、截断或溢出。
为什么 position: absolute 在底部居中时经常失效
很多人复制类似 .div_foot { position: absolute; bottom: 0; width: 100%; text-align: center; } 的写法，但问题在于：position: absolute 会让元素脱离文档流，如果父容器没设 position: relative，它就相对于整个视口定位；而当页面内容高度不足（比如空页或短内容），底部就会“悬空”在视口底部，而不是紧贴内容末尾。更糟的是，某些 iOS Safari 会因 viewport 缩放导致 bottom: 0 计算偏移。
实际场景中，你真正需要的是「内容结束后自然出现、始终水平居中、不遮挡正文、适配所有屏幕宽度」的版权栏——它本质是文档流末端的一个普通块元素。
text-align: center 必须配合块级容器才生效
text-align 只控制**行内内容**（文字、inline 元素）的对齐方式，对块本身无效。所以直接给 <div>2024 © example.com</div> 加 style="text-align:center" 是对的，但前提是这个 <div> 是块级且宽度撑满父容器。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：父容器是
<body>或<main>，子<div>默认块级，width自动为 100% - ❌ 错误：给
<span>或未设display: block的<div>加text-align，不起作用 - ⚠️ 隐患：如果父容器用了
float或display: flex但没设justify-content，text-align仍有效，但布局可能被干扰
响应式下避免硬编码 width 和 line-height
像 width: 1000px 或 line-height: 50px 这类固定值，在手机上会导致文字换行错乱、高度塌陷或左右滚动条。现代做法是放弃像素级控制，改用流式行为：
- 去掉
height和line-height，让文字按字体大小自然行高；必要时用padding控制上下留白 - 版权文字本身用
font-size: clamp(0.75rem, 1.2vw, 0.9rem)实现随屏缩放（可选，非必需） - 若需多行版权信息（如含地址、备案号），用
white-space: normal（默认）+max-width: 80ch防止超长行 - 不要给版权
<div>设margin-left或padding-left等偏移值——居中靠text-align，不是靠“手动挪”
完整可直接粘贴的最小可行代码
以下代码在所有现代浏览器（包括 iOS Safari 16+、Android Chrome）和窄屏设备上均能自然居底、水平居中，且不破坏文档流：
<footer style="text-align: center; padding: 1rem 0; font-size: 0.875rem;"> © 2024 example.com — 保留所有权利 </footer>
注意：© 是 HTML 实体，比手打 © 更稳妥；padding 替代 line-height，确保不同字号下留白一致；footer 语义化标签天然块级，无需额外 display 声明。
真正容易被忽略的点只有一个：别把它塞进 position: fixed 或 absolute 容器里——那不是“底部”，是“覆盖在底部上方”。让它老老实实待在 HTML 结构最末端，由浏览器自然渲染到内容之后，才是真·底部。
