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

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

这是应该的样子：

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

对于我用％的男性标志单位在这里经常陈述在计算器：（定位是绝对）

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

我也试图用大众和VH为女性的标志：

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

还是同样的结果。

查看我的CodePen了解详情。

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

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

作为一个侧面问题：这些按钮不应该被挤压，并应保持所有屏幕尺寸的完美圆形。

2016-02-12 Mr.Floppy

水平居中的标签，你需要添加以下标签

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

2016-02-12 12:58:56 Giorgos

谢谢！对于女性来说，这很有魅力！但不适合男性的标志。我已更新[CodePen]（http://codepen.io/MrFloppy/pen/eJxpGR）如何在不完全位于图像中心时执行此操作？ –

你可以'欺骗'一个littile位。大部分情况与上面相同，但增加一些负余量。这将是左：50％; transform：translateX（-50％）; margin-left：-10px; – Giorgos

非常感谢！完美的作品！ :) –

回答