Adaptive square block with text inside?

Question

I need to display div element with text inside adapted for resolution of display. It means that properties width, height should be in percent.

I tried some ways:

<div class="one">
   <span>A</span>
</div>

CSS:

.one { width: 3%; height: 3%}

It does not work, because width, height are set relatively parent element.

Another way is using padding:

.one { padding: 3% 4% 4% 3%}

It is better but not enough, because when I changed the scale of page I get ellipse instead circle. So, what practice to use for solving this issue?

In result I need to get square block with border-radius: 50% and text inside.