如何根据不同的屏幕尺寸正确定位元素

Question

对于我使用 Ionic 开发的移动应用程序，我试图在女性和男性标志的圆圈内放置一个标签。但是对于不同的屏幕尺寸，定位似乎很难做到。

它应该是这样的：

但是一旦我使用更大的屏幕，它看起来像这样：

对于男性标志，我使用了 stackoverflow 中经常提到的 % 单位： （定位是绝对的）

.gender-counter .male label{
  left: 38%;
  top: 28%;
}

我也尝试过使用 vw 和 vh 作为女性标志：

.gender-counter .female label{
  left: 8.7vw;
  top: 1vh;
}

还是一样的结果。

查看我的CodePen 了解详情。

我知道有一种方法可以使用 @media 为不同的屏幕尺寸进行特定设计。但是，为这么多不同的尺寸制作一个设计似乎完全是矫枉过正。

有没有更好的方法来做到这一点？

作为一个附带问题： 按钮不应被挤压，并且应与所有屏幕尺寸保持完美的圆形。

Answer 1

要将标签水平居中，您需要在标签中添加以下内容

left: 50%;
transform: translateX(-50%);