<p>伪元素红点居中不能只靠left: 50%，因其以左上角为定位原点，需用calc(50% - 宽度/2)或transform: translate(-50%, -50%)精确锚定中心，且必须设content: ""和父容器position: relative。</p>
伪元素加calc()居中红点，为什么不能只靠left: 50%
因为红点本身有尺寸（比如width: 8px、height: 8px），left: 50%只是把红点左边缘对齐到父容器中线，实际视觉中心会偏右4px。直接写left: calc(50% - 4px)看似能解，但一旦红点尺寸响应式变化（如用rem或vw），这个固定像素偏移就失效了。
更关键的是：伪元素（::after）默认以自身左上角为定位原点，而你想要的是“整个红点的中心”对齐父容器中心——这必须靠组合计算完成。
- 红点宽高一致时，中心偏移量 = 宽度 ÷ 2；所以
left: calc(50% - (8px / 2))才准确 - 若红点用
width: 1rem，则必须写left: calc(50% - (1rem / 2))，不能硬写-0.5rem（虽然等价，但可读性和维护性差） - 如果父容器用了
border-radius或transform，伪元素的定位基准可能被干扰，此时calc()仍有效，但需确认父容器没触发怪异模式（检查<!DOCTYPE html>）
::after红点必须设content: ""和position: absolute
漏掉content: ""是最高频错误——没有它，::after根本不会渲染，再准的calc()也白搭。同时，父容器必须有position: relative，否则absolute伪元素会相对于body定位，飘走。
典型结构：
立即学习“前端免费学习笔记（深入）”；
button {
position: relative;
}
button::after {
content: "";
position: absolute;
width: 8px;
height: 8px;
background: #f00;
border-radius: 50%;
top: -4px;
right: -4px;
left: calc(50% - 4px); /* 水平居中红点自身 */
transform: translateX(-50%); /* 补偿：确保中心对齐 */
}- 这里
left: calc(50% - 4px)+transform: translateX(-50%)是双重保险：前者粗略定位，后者精确锚定中心 - 如果只用
transform不写left，红点会以父容器左边缘为起点位移，容易溢出；反之只用calc()在缩放时易失准 - 移动端注意：
pointer-events: none要加在伪元素上，避免遮挡点击区域
响应式红点尺寸下，calc()怎么写才不翻车
当红点用width: 2vw或width: 0.5rem时，calc()里的除法右侧必须是无单位数字——这是硬性语法限制。例如left: calc(50% - (2vw / 2))合法，但left: calc(50% - 2vw / 2)也合法（空格足够），而left: calc(50% - 2vw / 2px)会报错（除数带单位）。
- 安全写法统一用括号包裹被除数：
calc(50% - (2vw / 2))，避免歧义 - 不要混用单位：
calc(50% - (1rem / 2))可以，但calc(50% - (1rem / 2px))非法 - IE9–10不支持
calc()里百分比参与运算（如calc(50% / 2)），此时必须降级为固定值或用JS动态写内联样式
红点贴边时，top/right和calc()怎么配合
红点常出现在按钮右上角（如未读消息数），此时水平居中不是目标，而是“紧贴右边缘并垂直居中”。这时calc()用在top上更自然：
button::after {
content: "";
position: absolute;
width: 8px;
height: 8px;
background: #f00;
border-radius: 50%;
top: calc(50% - 4px); /* 垂直居中红点自身 */
right: 4px; /* 距右边缘4px */
}-
top: calc(50% - 4px)确保红点中心与按钮垂直中线对齐，不受按钮高度变化影响 - 如果按钮高度响应式（如
height: 3rem），就写top: calc(50% - (3rem / 2))——但注意：这是错的，因为红点高度是8px，不是按钮高度；正确应始终用红点自身尺寸做减法 - 真正复杂点在于：当红点需“动态贴边+动态居中”，且父容器有
padding或border时，calc()得显式减去这些值，比如right: calc(4px + 1px)（含1px边框）
红点虽小，但calc()一写错，位置就偏移几个像素，用户第一眼就会觉得“不对劲”。最稳妥的方式是：红点尺寸用固定单位（如px）时，优先用transform: translate(-50%, -50%)配left: 50%; top: 50%；尺寸响应式时，才用calc()，且务必验证 IE 和 Safari 的兼容表现。
