div的垂直中心在移动设备和台式机上不同

Question

我一直试图将一个数字居中放在一个圆圈内，但我就是弄不明白。每次我想我有它时，它在某些平台上似乎都不起作用(无论是苹果手机、安卓浏览器、Mac OS X上的Safari还是Windows上的Chrome/Firefox(，都有1-2个像素的差异。

这是代码：

.unread-replies {
display: flex;
justify-content: center;
text-align: center;
align-items: center;
background-color: #F24648;
border-radius: 50%;
width: 25px;
height: 25px;
font-weight: 500;
color: white;
font-size: 17px;
border: 1px solid #00000066;
}
* {
box-sizing: inherit;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important;
}

<div class="unread-replies">1</div>

Fiddle复制到此处：https://jsfiddle.net/3vr2mkfb/3/

在这种情况下，在我的桌面浏览器中，它似乎不是垂直地以Chrome为中心，但它是垂直地以我的Android手机上的Chrome为中心。为什么会出现差异？

如果我尝试像padding-bottom: 2px;这样的小技巧，那么它不可避免地会在其他平台上引发一些问题。我想我需要真正的解决方案，但我不知道是否有？

Answer 1

添加一些与字体大小相同值的行高，看看它是否修复了任何内容。

Answer 2

使用视口单位，如vw用于宽度和vh用作高度而不是px或%因为这将帮助您使网页/网站具有响应能力。

它肯定会解决你的问题，但如果它不让我知道，我会尽力帮助你。