最常用居中方式是 margin: 0 auto，但需块级元素且有明确宽度；flexbox 适合容器内子元素水平垂直居中；absolute + transform 适用于脱离文档流的精确定位；text-align: center 仅对内部行内内容有效。
用 margin: 0 auto 居中块级元素
这是最常用也最稳妥的方式，但只对有明确宽度的块级元素有效。浏览器会把左右外边距设为相等，从而视觉居中。
常见错误是忘了给元素设 width，或者用了 display: inline（行内元素不响应 margin: auto）。
- 必须是块级元素（如
div、section），或显式设置display: block - 必须声明固定宽度，比如
width: 600px或max-width: 80% - 不能和
float共存——浮动会破坏auto计算逻辑
<div style="width: 600px; margin: 0 auto;">我的个人简介</div>
用 flexbox 实现容器内所有子元素水平+垂直居中
适合整个页面主体（比如 body 或一个 main 区域）需要内容居中时。比传统方式更直观，兼容性也已覆盖主流浏览器（IE10+ 需加前缀，但现代项目基本可忽略）。
注意：居中的是「子元素」，不是容器自身；父容器需启用 flex 布局。
立即学习“前端免费学习笔记（深入）”；
- 父容器加
display: flex+justify-content: center（水平）+align-items: center（垂直） - 若子元素是单个块，且希望它“撑满可用空间再居中”，要额外控制
flex缩放行为 - 避免在 flex 容器里混用
margin: auto和justify-content，容易冲突
<main style="display: flex; justify-content: center; align-items: center; min-height: 100vh;"> <div>欢迎来到我的主页</div> </main>
用 position: absolute + transform 精确居中单个元素
适用于模态框、加载提示、悬浮卡片等需要脱离文档流并精确定位的场景。比老式“负 margin”方案更安全，无需预知尺寸。
关键点在于：top: 50% 把元素顶部移到父容器中间，transform: translateY(-50%) 再把自己往上拉一半高度——两者配合实现垂直居中。
- 父容器需设
position: relative（或其它非static值）作为定位上下文 - 水平居中同理：加
left: 50%+transform: translate(-50%, -50%) - 慎用于响应式布局中的宽高不定元素——
transform不影响文档流，但可能遮挡其他内容
<div style="position: relative; height: 400px;">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ">
这是居中的卡片
</div>
</div>
为什么 text-align: center 只对行内内容有效
很多人误以为它能让整个 div 居中，其实它只控制**内部行内内容**（文字、图片、span）的对齐方式。对块级子元素完全无效。
典型误用场景：给 body 加 text-align: center，发现 div 没动，但里面的文字和图片却歪了。
- 它不影响块级元素的定位，只改变其内部行内盒的排列起点
- 若想靠它“间接居中”，得把目标块设成
display: inline-block，再配vertical-align: middle（但此时垂直居中仍需额外处理） - 移动端慎用：某些旧 Android WebView 对
text-align渲染异常
真正想让页面整体居中，别依赖这个属性——它不是布局工具，是排版工具。
实际项目中，flexbox 是首选；但遇到老系统兼容要求，或只需简单水平居中，margin: 0 auto 更轻量。别为了“炫技”强行套用 absolute + transform，尤其当元素本身有流式行为需求时。 
