如何针对不同的屏幕尺寸正确定位元素

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

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