用 flex 实现首字母居中需设 display: flex、justify-content: center、align-items: center，父容器须显式定义等宽高（如 40px），并加 border-radius: 50%；推荐结构为 A，样式全写在 .avatar 上。
用 flex 实现首字母居中需要哪些必要样式
只靠 display: flex 不够，必须配合 justify-content 和 align-items 才能真正水平+垂直居中。很多人写了 flex 却发现字母偏上或贴边，其实是忘了设这两项，或者父容器没定高宽。
-
width和height必须显式设置（比如40px），否则 flex 容器高度由内容撑开，居中就失效 -
border-radius: 50%要加在同一个元素上，且width和height必须相等才能出正圆 - 字体大小建议用
em或固定值（如16px），避免在小尺寸容器里溢出
首字母文字头像的 HTML 结构怎么写最稳妥
别用 <span></span> 包一层再 flex，直接让文字容器自己承担 flex 布局职责。常见错误是把背景色、圆角、flex 都写在了外层 div，但文字用子元素（比如 <p></p>）塞进去——这样反而增加嵌套和对齐难度。
- 推荐结构：
<div class="avatar">A</div>，样式全写在.avatar上 - 避免内联样式干扰，尤其不要在 HTML 里写
style="display:flex"，统一走 CSS 类 - 如果要支持空用户名（比如显示 “?”），记得用
text-transform: uppercase+font-weight: 600提升可读性
IE11 下 flex 居中失效怎么办
IE11 对 flex 的实现有坑：不支持 align-items: center 在某些文档模式下生效，尤其当父容器没设 line-height 或用了 vertical-align 时。
- 兼容方案：加一句
line-height: 40px（和容器高度一致），再配text-align: center，作为降级 fallback - 不要依赖
margin: auto居中文字——它只对块级替换元素有效，对普通文本无效 - 若项目必须支持 IE11，建议用
display: table-cell+vertical-align: middle替代，虽然略重但稳定
背景色和文字颜色如何自动适配深色/浅色模式
CSS 自定义属性（--bg-color）配合 prefers-color-scheme 是最轻量的解法，但要注意：不能只改背景，文字对比度也得同步调，否则深色模式下灰字看不清。
立即学习“前端免费学习笔记（深入）”；
- 基础写法：
background-color: var(--bg-color, #4a90e2); color: var(--text-color, white); - 在
@media (prefers-color-scheme: dark)里重定义变量，而不是重写整套规则 - 避免用
opacity模拟浅色文字——它会降低对比度，不符合无障碍要求
<div class="avatar"> 里——样式部分，到这里就足够了。</div> 
