真正实现像素级、方向可控、脱离文档流的对齐需用 position + transform 或 flex/grid 组合；position: absolute + transform 是兼容性好、尺寸无关的精准居中方案，父容器须设 position: relative，子元素设 top: 50%; left: 50%; transform: translate(-50%, -50%)。
text-align 只能控制行内内容水平对齐，不能“精准定位”；真正实现像素级、方向可控、脱离文档流的对齐，得靠 position + transform 或 flex/grid 的组合控制。
用 position: absolute + transform 实现任意偏移居中
这是目前兼容性好（IE9+）、尺寸无关、真正“精准”的方案，尤其适合模态框、提示气泡、图标遮罩等场景。
- 父容器必须设
position: relative（否则元素会相对于body定位） - 子元素设
position: absolute; top: 50%; left: 50%，把左上角锚点移到父容器中心 - 再加
transform: translate(-50%, -50%)，让自身回退一半宽高——这才是真正居中 - 若只需右下角定位，改用
top: auto; bottom: 20px; right: 20px; transform: none - Android 4.3 及以下需补
-webkit-transform
flex 容器里用 margin-left: auto 推单个元素到右侧
不是所有右对齐都该用 justify-content: flex-end——当你要在一组左对齐按钮中单独“挤出”一个操作按钮（如「删除」），margin-left: auto 更干净。
- 只在
display: flex的直接子元素上生效 - 它会吃掉左侧所有剩余空间，把该元素“顶”到最右（或最底，取决于
flex-direction） - 比
justify-content: flex-end更细粒度：不影响其他兄弟元素位置 - 注意：不能和
justify-content混用，后者会覆盖前者的空间分配逻辑
vertical-align: middle 失效的常见原因
这个属性常被误用于块级容器，但它只在 display: table-cell、inline 或 inline-block 元素上起作用，且只影响**行内格式化上下文中的基线对齐**。
- 给
<div> 直接写 <code>vertical-align: middle—— 无效，因为div默认是block - 图片和文字混排时，若文字换行了，
vertical-align会按最后一行基线对齐，看起来像“没居中” - 想让图片和多行文字垂直居中？别硬调
vertical-align，改用display: flex; align-items: center - 表格单元格里可用
vertical-align: middle，但仅限<td> 和 <code><th> 标签本身 <h3> <code>place-items: center在 Grid 中的边界条件看似一行解决居中，但实际生效需要两个隐含前提：容器必须有明确的网格轨道（哪怕只有一行一列），且子元素不能是
float或absolute定位。立即学习“前端免费学习笔记（深入）”；
- 仅设
display: grid不够，必须有至少一个显式轨道定义，比如grid-template-rows: 1fr或grid-auto-rows: minmax(0, 1fr) - 如果子元素用了
position: absolute，它就脱离了 Grid 布局上下文，place-items对它完全无效 - 在响应式布局中，
place-items会随容器尺寸实时重算，比transform方案更自然，但旧版 Safari（-webkit-place-items - 它同时控制
justify-items和align-items，若你只想水平居中，用justify-items: center更精确
flex/grid统筹，还是子元素自己用position破局。选错层级，后面所有偏移值都会漂移。 - 仅设
