HTML 元素居中没有“一招鲜”，得看是哪种居中：内容居中？块级元素水平居中？绝对定位居中？Flex 布局居中？每种场景对应不同解法，错配就白折腾。
text-align: center 只对内联内容有效
很多人以为 text-align: center 能让任意元素居中，其实它只影响**行内内容在父容器中的水平对齐方式**，比如文字、<span></span>、图片（当它们是内联元素时）。对 <div> 这类块级子元素完全无效。
<ul>
<li>适用场景：让段落文字、按钮文字、图标文字居中</li>
<li>常见错误：给父 <code><div> 加 <code>text-align: center，却指望里面一个没设宽的子 <div> 也跟着水平居中 —— 不会
<li>注意：<code>text-align 不影响垂直方向，也不改变子元素的盒模型尺寸或定位
margin: 0 auto 只对有宽度的块级元素生效
这是最经典的水平居中方式，但条件很明确：目标元素必须是块级（或设了 display: block），且**显式设置了 width（或 max-width）**，否则 auto 的左右 margin 会被浏览器忽略。
- 示例：
<div style="width: 300px; margin: 0 auto;">我居中了</div> - 不生效的情况：没设
width；元素是inline或inline-block（除非额外处理）；父容器是flex或grid容器（此时它会被覆盖） - 兼容性好，IE6+ 都支持，但无法解决垂直居中
绝对定位 + transform 是最稳妥的全向居中
当需要把一个元素在父容器里**水平+垂直同时居中**，且不依赖 Flex/Grid（比如要兼容老项目），用 position: absolute 配合 transform 是目前最可靠的做法。
立即学习“前端免费学习笔记（深入）”；
- 关键写法：
top: 50%; left: 50%; transform: translate(-50%, -50%); - 原理：先移到父容器中心点（50%, 50% 是左上角位置），再用
translate向左上反向偏移自身宽高的一半 - 必须确保父容器有
position: relative（或其他非static值），否则会相对于视口定位 - 比
margin: auto+top/left/bottom/right: 0更通用，不依赖元素尺寸是否固定
Flex 布局居中：一行代码解决多数场景
现代开发中，只要父容器能设为 display: flex，居中就变得极其简单。但要注意：它作用的是**直接子元素**，不是后代元素。
- 水平居中：
justify-content: center - 垂直居中：
align-items: center - 两者一起写：
display: flex; justify-content: center; align-items: center; - 常见坑：忘了给父容器设高度（尤其垂直居中时，父容器若无高度，
align-items就没效果）；子元素用了float或position: absolute，会脱离 Flex 流 - 性能和兼容性：Chrome/Firefox/Safari/Edge 全支持，IE10+ 需加
-ms-前缀，IE9 及以下不支持
真正难的不是“怎么居中”，而是判断清楚：这个元素是不是脱离文档流？它的父容器是什么布局模式？要不要响应式？这些细节一错，哪怕抄对了代码，页面照样跑偏。
