侧栏容器必须设 position: relative；若用 absolute 定位链接需配合 width: 100% 和 text-align: center，或改用 flex 布局（display: flex; flex-direction: column; justify-content: flex-end; align-items: center）更稳妥。
侧栏容器必须设 position: relative
固定侧栏（比如 <aside> 或带 class="sidebar" 的 <div>）若想让内部链接精准停在底部，它的定位上下文必须明确。如果侧栏本身没设 position: relative（或 absolute/fixed），那里面用 position: absolute; bottom: 0 的链接会向上逐级找最近的定位祖先——很可能跑到 <body> 底部去，完全脱离侧栏边界。
常见错误现象：链接出现在整个页面最底下，而不是侧栏区域底部。
- 侧栏元素必须显式加
position: relative - 不要依赖父级（如
<body>或<main>）的定位设置 - 如果侧栏本身是
position: fixed，那它自己就是定位上下文，无需额外加relative
bottom: 0 配合 width: 100% 才能真正“撑满底部”
只写 bottom: 0 不够。绝对定位元素默认宽度由内容决定（shrink-to-fit），导致 text-align: center 在其内部失效——因为父容器（即链接所在容器）本身没占满侧栏宽度，居中无从谈起。
使用场景：侧栏宽度固定（如 240px）或响应式（width: 100%）都适用。
立即学习“前端免费学习笔记（深入）”；
- 给链接外层容器（如
<div class="sidebar-footer">）加position: absolute; bottom: 0; left: 0; width: 100% - 再对这个容器设
text-align: center，子链接自然水平居中 - 若链接是
<a>标签且为行内元素，无需额外display调整
用 Flex 布局替代绝对定位更稳妥
绝对定位容易和滚动、高度变化冲突；Flex 则天然适配动态内容。只要侧栏高度可预测（比如设了 min-height 或 height），Flex 就能稳定把链接推到底部。
性能与兼容性：Flex 支持 IE10+，现代项目基本无顾虑；比 JS 计算位置轻量得多。
- 侧栏容器设
display: flex; flex-direction: column; justify-content: space-between - 把链接放在侧栏最末尾，它会自动被“挤”到底部
- 若侧栏内容少，又想确保链接始终贴底，改用
justify-content: flex-end - 配合
align-items: center实现水平居中，不用管text-align
超链接文字本身不居中？检查是否被 display: block 破坏
很多人给链接加 display: block 是为了方便点击，但忘了它会让 text-align: center 失效——因为此时链接变成块级，居中逻辑要落在它自己身上，而非父容器。
常见错误现象：父容器写了 text-align: center，但链接文字还是左对齐。
- 方案一：保留链接为默认
inline，靠父容器text-align: center控制 - 方案二：若必须
display: block，就在链接自身加text-align: center - 方案三：用 Flex 直接控制链接（
display: flex; justify-content: center），彻底绕过文本对齐逻辑
最容易被忽略的是：侧栏高度未定义时，flex-end 或 bottom: 0 都可能失效——浏览器不知道“底部”在哪。务必确认侧栏有明确高度来源（height、min-height、内容撑开或视口单位如 100vh）。
