页尾超链接居中需先确保footer位于页面底部：将其设为body的最后一个直接子元素，外层容器用display: flex+flex-direction: column+min-height: 100vh，main加flex: 1；再对footer应用text-align: center即可。
页尾超链接居中不是靠 text-align: center 就能一劳永逸的——它得先在视觉上真正“停在页面最底部”，否则居中了也悬在半空，用户根本看不到。
footer 里的链接不居中？先检查它是不是真在页面底部
很多人直接给 <footer> 写 text-align: center，结果发现链接明明写了居中，却离屏幕底边还有一大截空白。这不是 CSS 写错了，是 <footer> 根本没被推到文档流末端。
- 确保
<footer>是<body>的**最后一个直接子元素**（不能套在<div id="app">或<main>里） - 给外层容器（推荐用
<div class="page-wrapper">包住<header>、<main>、<footer>）设：display: flex+flex-direction: column+min-height: 100vh -
<main>必须加flex: 1（或flex-grow: 1），否则 footer 会被内容“带上去” - 别用
position: fixed—— 它会让链接在长页面里悬浮遮挡正文，且移动端键盘弹出时大概率错位
超链接本身怎么水平居中？text-align 是对的，但有前提
只要 <footer> 已经在文档流底部，里面放行内元素（比如 <a>）就可用 text-align: center 居中。但要注意几个细节：
- 如果
<footer>里混用了块级元素（如<p>或<div>），得确保它们没破坏行内流 —— 最好统一用<p>包裹链接，再给p设text-align: center - 避免给
<a>自己设display: block后又忘加margin: 0 auto—— 那样反而要额外写宽度和居中逻辑 - 需要多行居中（比如版权文字 + 多个链接竖排）？改用
display: flex+justify-content: center更稳，不受换行或空格影响
年份自动更新的链接要不要加 JS？大多数情况不用
像 <a href="/terms">条款</a> | <a href="/privacy">隐私政策</a> © <span id="year">2024</span></footer> 这种结构，年份写死最可靠。非要动态，一行内联 JS 足够：
立即学习“前端免费学习笔记（深入）”；
<script>document.getElementById('year').textContent = new Date().getFullYear()</script>
- 别引入框架或监听
DOMContentLoaded—— footer 在 DOM 底部，脚本放它后面就能直接执行 - 服务端渲染（SSR）或静态站点生成（SSG）项目，构建时替换年份更安全，避免 JS 失效导致显示 “© undefined”
- 注意：如果用
min-height: 100dvh（适配 iOS 键盘），年份 JS 不受影响，但dvh本身需确认目标浏览器支持（Safari 16.4+）
移动端键盘弹出后 footer 上浮？别碰 vh 单位
iOS Safari 唤起软键盘时，100vh 会按缩小后的可视区重新计算，导致 min-height 突然变小，footer 被“吸”上来。这不是你 CSS 写错了，是单位选错了。
- 优先换用
100dvh（dynamic viewport height），它能响应键盘弹出，Chrome/Edge/Safari 新版本都支持 - 若需兼容老 Safari（resize 或
focusin，算出真实高度后写入style="--avail-height: ...px"，再让.page-wrapper用min-height: var(--avail-height) - 切忌用
position: fixed+bottom: 0当兜底方案——它只会让 footer 在键盘顶起时彻底消失在视口外
真正的难点不在“怎么居中”，而在于让 footer 先成为页面逻辑终点；一旦它脱离文档流（比如被 fixed、absolute 或 flex-basis 算错撑不开），所有居中样式都会失效。动手前，先用 DevTools 检查 <footer> 是否确实是 <body> 的最后一个子节点，以及它的 offsetTop 是否随内容增长而变化——这是判断布局是否“粘性”的最快方式。
