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