Html 如何强制通知徽章计数器在css中始终处于中心位置

我有一个以特定设备宽度为中心的通知徽章计数器，当设备宽度变大时，它会改变其位置。我希望通知柜台总是在中心。 我正在使用css，我的html/css代码如下：

.nav菜单{
位置：固定；
底部：0；
宽度：100%；
字体系列：Calibri，投石机，Arial，无衬线；
长方体阴影：0.3pxRGBA（0,0,0,0.2）；
背景色：#ffffff；
显示器：flex；
溢出-x：自动；
高度：56px；
z指数：9999；
}
.导航链接{
位置：相对位置；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
柔性生长：1；
最小宽度：50px；
溢出：隐藏；
空白：nowrap；
字体大小：12px；
字体大小：粗体；
颜色：#4D5656；
文字装饰：无；
-webkit点击突出显示颜色：透明；
过渡：背景色0.1s缓进缓出；
字体系列：Calibri，投石机，Arial，无衬线；
填充顶部：10px；
}
.导航链接：悬停{
背景色：#eeeeee；
}
.nav__链接--激活{
背景色：#84B213；
颜色：#fff；
}
.导航图标{
字号：18px；
}
.项目计数包含{
顶部：3px；
右：44px；
位置：绝对位置；
对齐项目：居中；
证明内容：中心；
宽度：20px；
高度：20px；
边界半径：50%；
背景色：#dc3545；
颜色：#ffffff；
字体大小：12px；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
}

---

您在

项目计数contain

上使用的是

右：44px

，它是一个固定值，因此显然没有响应。添加

left:50%

和

transform:translateX（-50%）

将其水平移动到中心位置

如果您希望垂直集中，则应用

top:50%

和

transform:translateY（-50%）

Bot集中化可以结合使用：

top: 50%;
left: 50%;
transform: translate(-50%,-50%);

.nav菜单{
位置：固定；
底部：0；
宽度：100%；
字体系列：Calibri，投石机，Arial，无衬线；
长方体阴影：0.3pxRGBA（0,0,0,0.2）；
背景色：#ffffff；
显示器：flex；
溢出-x：自动；
高度：56px；
z指数：9999；
}
.导航链接{
位置：相对位置；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
柔性生长：1；
最小宽度：50px；
溢出：隐藏；
空白：nowrap；
字体大小：12px；
字体大小：粗体；
颜色：#4D5656；
文字装饰：无；
-webkit点击突出显示颜色：透明；
过渡：背景色0.1s缓进缓出；
字体系列：Calibri，投石机，Arial，无衬线；
填充顶部：10px；
}
.导航链接：悬停{
背景色：#eeeeee；
}
.nav__链接--激活{
背景色：#84B213；
颜色：#fff；
}
.导航图标{
字号：18px；
}
.项目计数包含{
顶部：3px；
左：50%；
转化：translateX（-50%）；
位置：绝对位置；
对齐项目：居中；
证明内容：中心；
宽度：20px；
高度：20px；
边界半径：50%；
背景色：#dc3545；
颜色：#ffffff；
字体大小：12px；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
}

---

当宽度已知且固定（20px）时，就很容易了：

左：50%；左边距：-10px

更好。将

translateX（-50%）

与

left:50%一起使用。这将使它居中，而不考虑右边的宽度：44px；从.item count包含