padding本身不能实现居中，仅通过等量内边距制造视觉居中效果；真正居中需配合text-align、line-height或flex等属性，且必须注意box-sizing、容器高度及响应式适配。
padding 本身不能实现居中，它只是增加内边距；所谓“用 padding 居中”是靠手动计算上下/左右留白来模拟视觉居中效果，仅适用于极少数受控场景。
为什么 padding: 50px 不会让内容真正居中
给一个 div 设置 padding: 50px，只是在内容四周各加了 50px 空白，内容本身仍按默认流布局（比如文字靠左顶格）。如果父容器没设 height，padding 还会把容器撑高，导致“看起来更偏上”。
- 常见错误现象：
padding: 100px后文字还是贴顶、图标浮在上方、按钮文字没垂直居中 - 根本原因：padding 不改变内容的对齐方式，也不触发任何居中逻辑
- 它影响的是盒模型尺寸：总高度 =
height+padding-top+padding-bottom+border（除非用了box-sizing: border-box）
什么情况下能“假装居中”——仅限单行文本+固定高容器
当容器高度固定、内容为单行且字体大小稳定时，可手动算出上下 padding 值，让内容在视觉上居中。例如容器高 200px，文字行高 24px，则设 padding: 88px 0（即 (200 − 24) / 2）。
- 必须显式设置父容器
height，否则 padding 只是增加高度，无居中意义 - 内容一旦换行、字体缩放（如用户调大系统字号）、或加载 Web Font 导致重排，数值立刻失效
- 不兼容响应式设计：媒体查询改了容器高，padding 值就得同步改，维护成本高
- 和
line-height混用会冲突，浏览器优先按行框逻辑渲染，padding 成为干扰项
align-items: center 才是 padding 的替代方案
现代标准解法是用 Flexbox，把 display: flex 和 align-items: center 加在父容器上。它不依赖内容尺寸，不需计算，也不怕换行或缩放。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
.child { align-items: center }（子元素加无效，必须加在父容器） - 正确写法：
.parent { display: flex; align-items: center; height: 80px; } - 注意避免同时设
height和min-height，某些旧版 Safari 在 flex 容器中处理异常 - 若子元素是块级且带
margin，可能轻微偏移，建议统一设margin: 0或用align-self微调
真正容易被忽略的是：很多人试过 padding 失败后，转头去查 vertical-align，结果发现对块级元素完全无效——因为 vertical-align 只作用于 inline 或 inline-block 元素，且是对齐到行框基线，不是父容器。这个限制在调试时几乎从不报错，只默默失效。
