红点提示需依托父容器position: relative，用::after伪元素+absolute+transform实现稳定定位；居中应优先用Flexbox而非绝对定位，避免破坏定位上下文；data-unread属性控制显隐更可靠。
红点提示和元素居中不是同一类问题，但实际开发中常被一起处理——比如一个居中的通知按钮右上角要挂红点。关键在于：红点定位依赖父容器的 position: relative，而居中逻辑（如 margin: 0 auto 或 flex）必须不破坏这个定位上下文。
红点必须用 position: absolute + transform 定位
直接写 top: -4px; right: -4px 看似简单，但字体缩放、按钮内边距变化、不同浏览器基线渲染都会让红点飘移。稳定做法是：
- 按钮或图标容器加
position: relative - 红点用
::after伪元素，设position: absolute; top: 0; right: 0; transform: translate(50%, -50%) - 避免用字符
●，改用content: ""+background-color+border-radius: 50% - 移动端需在
@media (max-width: 768px)中把红点尺寸从8px改为6px
居中方案不能干扰红点的定位上下文
如果按钮本身要居中，错误做法是给按钮加 position: absolute 再用 left: 50%; transform: translateX(-50%) —— 这会让它的 position: relative 失效（脱离文档流后，子元素的 absolute 会相对 body 定位）。
- 推荐用 Flexbox 居中：外层容器设
display: flex; justify-content: center; align-items: center - 若用
margin: 0 auto，确保按钮是块级且有明确宽度，同时保留其position: relative - 绝对定位居中仅用于模态框等必须脱离流的场景，此时红点仍可工作，但需确认父容器是该绝对定位元素，而非 body
data-unread 控制显隐比 class 更可靠
用 class="has-unread" 切换红点，容易在框架更新时漏掉 class 清除；用属性驱动更语义化、更易调试：
立即学习“前端免费学习笔记（深入）”；
- HTML 写
<button data-unread="3">消息</button> - CSS 用
[data-unread]:not([data-unread="0"])::after显示红点 - JS 只需改
el.dataset.unread = "0"，CSS 自动隐藏 - 需要淡出动画？加
transition: opacity 0.2s，配合opacity: 0和pointer-events: none
最容易被忽略的一点：红点的 transform 锚点依赖父容器的盒模型边界，如果按钮用了 padding 或 line-height 影响内联布局，top: 0; right: 0 实际起点可能不是视觉右上角——此时应微调 right 和 top 值（如 right: 4px; top: 4px），再用 transform 居中，而不是硬靠猜像素。
