Question

我一直试图将数字居中放置在一个圆圈内，但我还是不太明白。每次我认为我拥有它时，似乎都无法在某些平台上使用它（无论是苹果手机，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;
}

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

此处复制小提琴：https://jsfiddle.net/3vr2mkfb/3/

在这种情况下，它似乎不是在我的桌面浏览器中垂直位于Chrome的中心，而是在我的Android手机中垂直位于Chrome的中心。为什么会有差异？

如果我尝试使用padding-bottom: 2px;之类的小技巧，那么不可避免地会在其他平台上引起一些问题。我想我需要实际的解决方法，但是我不知道是否有解决方法？

Answer 1

添加一些行高，其值与font-size相同，看看它是否可以解决任何问题。

Answer 2

将视口单位（例如 vw ）用于宽度，将 vh 用于高度的 px 和％，因为它可以帮助您使网页/网站具有响应性。

它肯定会解决您的问题，但是如果没有让我知道的话，我会尽力帮助您。

在移动设备和台式机上，div的垂直居中位置不同吗？

2 个答案: