How to position elements properly regarding different screen sizes

Question

For a mobile app which I develop using Ionic I'm trying to position a label inside the circle of the female and male sign. But the positioning seems quite hard to do with different screen sizes.

This is how it should look like:

But once I use a bigger screen it looks like this:

For the male sign I used the % unit as often stated here at stackoverflow: (positioning is absolute)

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

I've also tried to use vw and vh for the female sign:

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

Still same result.

Check out my CodePen for details.

I know there is a way to make a specific design for different screen sizes using @media. But this seems like a total overkill to make one design for so many different sizes.

Is there any better way to do this?

As a side-question: The buttons should not be squeezed and should keep a perfect circle with all screen sizes.

Answer 1

To center the labels horizontally you need to add the following to labels

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