单个字符居中需依赖容器：text-align要求块级元素；flex更可靠，需justify-content/align-items；line-height法适用于固定高宽容器；absolute定位需transform反向偏移。
用 text-align: center 居中单个字符，但得看它在什么容器里
单独一个字符（比如 "★"）本身没有宽度概念，text-align: center 只对块级容器内的行内内容起作用。直接给字符加样式没用，必须让它在一个有明确宽度的块级元素里，比如 <div> 或 <code><p></p>。
常见错误是写成这样：<span style="text-align:center">★</span>——span 默认是行内元素，不占满父容器宽度，text-align 完全不生效。
- ✅ 正确做法：用
<div style="text-align:center">★</div> - ✅ 或者显式设为块级：
<span style="display:block; text-align:center">★</span> - ⚠️ 注意：如果父容器本身没设宽度（比如默认 100%），居中效果看起来“没变化”，其实是居中了，只是你没感知到边界
用 flex 居中更可靠，尤其面对不定宽字符
某些字符（如 emoji、全角符号、组合字形）渲染宽度不稳定，text-align 在小容器里可能偏移。用 flex 能绕过文本流计算，直接按视觉中心对齐。
典型错误是只写 display: flex 却漏掉 justify-content 或 align-items，结果字符贴左顶上。
立即学习“前端免费学习笔记（深入）”；
- ✅ 最小可用写法：
<div style="display:flex; justify-content:center; align-items:center; height:2em">★</div> - ✅ 如果只水平居中（不用垂直），
align-items可省，但height或line-height得设，否则高度塌缩，看不出居中效果 - ⚠️ 兼容性注意：IE10+ 支持
flex，但老版本需加-ms-前缀；若需支持 IE9 及更早，只能退回text-align+line-height方案
line-height 配合 text-align 是最轻量的垂直+水平居中
当容器是固定高宽的方块（比如图标按钮、徽章），line-height 等于容器高度，再配 text-align: center，就能让单个字符在视觉上完全居中——原理是把字符当成一行文本，用行高撑开基线位置。
容易踩的坑是：容器有 padding 或 border，但没算进总高度；或者字体本身有上下留白（比如某些 emoji 渲染时自带偏移）。
- ✅ 推荐写法：
<div style="width:40px; height:40px; line-height:40px; text-align:center; font-size:24px">★</div> - ✅ 若容器有
border，用box-sizing: border-box避免尺寸溢出 - ⚠️ 字体影响大：
font-family换成"Segoe UI Emoji"或"Apple Color Emoji"时，同一字符上下位置可能微调，测试时别只看一种字体
用 position: absolute 居中适合脱离文档流的场景
比如字符要浮在图片上、或作为加载指示器盖在某个区域中央。这时候不能依赖父容器文本流，得靠定位。
常见错误是只设 left: 50% 却忘了反向偏移自身宽度，导致偏右一半。
- ✅ 标准写法：
<div style="position:relative; width:100px; height:100px"><span style="position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) ">★</span></div> - ✅ 如果字符宽度固定且已知（比如纯 ASCII 字符），可用
margin-left: -Xpx替代transform，但 emoji 和中文基本不可行 - ⚠️ 性能提示：频繁动画该字符时，
transform比改left/top更高效，浏览器会走合成层
