如何根據不同的屏幕尺寸正確定位元素

對於我使用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

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

回答