title: Adaptive square block with text inside?
body: <p>I need to display <code>div</code> element with text inside adapted for resolution of display. It means that properties width, height should be in percent.</p>
  
  <p>I tried some ways:</p>
  
  <pre><code>&lt;div class="one"&gt;
     &lt;span&gt;A&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.one { width: 3%; height: 3%}
  </code></pre>
  
  <p>It does not work, because width, height are set relatively parent element.</p>
  
  <p>Another way is using padding:</p>
  
  <pre><code>.one { padding: 3% 4% 4% 3%}
  </code></pre>
  
  <p>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?</p>
  
  <p><strong>In result</strong> I need to get square block with <code>border-radius: 50%</code> and text inside.</p>