div 中的垂直居中在移动设备和桌面设备上有所不同？

Question

我一直在尝试将数字置于圆圈的中心，但我不太明白。每次我想我拥有它时，它似乎在某些平台上不起作用（无论是苹果 phone、android 浏览器、Mac [=41= 上的 Safari ] X，或 Chrome / Windows 上的 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，但它是在我的 Chrome 上垂直居中=34=] phone。为什么会出现差异？

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

Answer 1

使用 视口单位，例如 vw 用于 width 和 vh 用于 height 而不是 px 和 % 因为它会帮助您 webpage/website 反应灵敏。

它一定会解决你的问题，但如果它不能在评论中让我知道，我会尽力帮助你。

Answer 2

添加一些与字体大小相同的行高值，看看是否能解决任何问题。

div 中的垂直居中在移动设备和桌面设备上有所不同？

Vertically center in div differs on mobile vs desktop?

html

css

mobile

android

centering