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

【问题标题】：Vertically center in div differs on mobile vs desktop?div中的垂直居中在移动设备和桌面设备上有所不同？
【发布时间】：2020-11-10 09:24:06
【问题描述】：

我一直试图将一个数字放在一个圆圈的中心，但我无法完全理解。每次我认为我拥有它时，它似乎在某些平台上不起作用（无论是苹果手机、Android 浏览器、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;
}

&lt;div class="unread-replies"&gt;1&lt;/div&gt;

这里的小提琴副本：https://jsfiddle.net/3vr2mkfb/3/

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

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

【问题讨论】：

嘿，快来看看我是否解决了你的问题，还是需要提高我的技能？

标签： android html css mobile centering

【解决方案1】：

添加一些与 font-size 值相同的 line-height 并查看它是否修复了任何问题。

【讨论】：

我试过了，它几乎修复了它。它现在完美地集中在桌面上，但在移动设备上 1-2 像素
这个答案已经足够接近了。我很好，它偏离中心 1 个像素，因为以前它偏离中心 2 个像素。

【解决方案2】：

使用 Viewport Units，例如 vw 代表 width 和 vh 代表 height px 和 %，因为它将帮助您使您的网页/网站具有响应性。

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

【讨论】：