页脚不居中主因是盒模型细节未处理：需重置box-sizing为border-box、清除body默认margin、确保父容器有足够高度（如min-height: 100vh），并优先用嵌套Flex而非复杂Grid布局。
页脚内容不居中，先检查box-sizing和margin是否被重置
很多页脚看起来“偏了”，其实不是布局写错了，而是盒模型计算出意外。比如padding或border没被包含在宽度内，导致width: 100%实际超出容器；或者body默认有margin，把整个页面往下推了一截，页脚自然悬空。
- 统一加
* { box-sizing: border-box; }，避免padding撑宽元素 - 显式重置
body { margin: 0; }，否则min-height: 100vh会失效 - 如果用了
float清浮动不彻底，页脚父容器可能高度塌陷——改用display: flex或overflow: hidden更可靠
justify-content: space-between在Grid页脚里没反应？大概率是列轨道没剩空间
这不是语法错，是Grid的justify-content只对“列轨道整体”生效，不是推子元素。页脚常用grid-template-columns: 1fr auto 1fr，但1fr会把容器宽度吃干净，根本没剩余空间可分配，属性直接被忽略。
- 打开DevTools → Elements → 查看
Computed里的width，确认容器宽是否大于所有列宽之和 - 别依赖
space-between让三块内容左/中/右，改用grid-template-columns: max-content 1fr max-content+justify-self: start / center / end - 移动端切单列时，
space-between必然失效（至少需两列），直接用text-align: center更稳妥
页脚贴不住底？align-items无效往往因为父容器没高度
align-items: flex-end或justify-content: flex-end在页脚上不起作用，通常不是属性写错，而是它所在的Flex容器本身高度不够——比如body没设min-height: 100vh，或者被margin-collapse压缩了实际可用空间。
- 根容器（如
body或包裹header/main/footer的div）必须设min-height: 100vh，不是height: 100vh - 主内容区用
flex: 1或margin-top: auto推页脚到底部，比依赖align-items更稳定 - Grid方案中
grid-template-rows: auto 1fr auto也得配合min-height: 100vh，否则1fr分到0px
多区域页脚对齐混乱，优先用嵌套Flex而非硬套Grid
页脚含logo、导航、版权、社交图标多个区块时，强行用Grid定义复杂行列，反而容易在响应式断点下错位。Flex嵌套更可控：外层控制区块分布，内层控制每个区块内部对齐。
立即学习“前端免费学习笔记（深入）”；
- 外层
.footer-container { display: flex; justify-content: space-between; }管三区块水平分布 - 中间导航区再套一层
display: flex; justify-content: center;让它自己居中 - 移动端用
@media (max-width: 768px) { .footer-container { flex-direction: column; } }，比Grid媒体查询更少出错
真正卡住页脚对齐的，往往不是布局技术选错，而是盒模型细节没抠准——box-sizing漏了、body margin没清、容器高度没撑够，这些地方一松动，再好的flex或grid都会失效。
