title: How do I responsively center text inside of a <div>
body: <p>I have a <code>&lt;div&gt;</code> that contains three <code>&lt;div&gt;</code>s.
  In each of those <code>&lt;div&gt;</code> elements is a <code>&lt;p&gt;</code> element with text and 2 nested  elements to make a radial progress bar. What I need is to put the text in the middle of the circles, and do it responsively using pure CSS. I need something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/nM5UV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nM5UV.png" alt="Wanted result"></a></p>
  
  <p>The code has flaws, like that <code>&lt;p&gt;</code> inside of a <code>&lt;span&gt;</code> but I am fixing it in the new version with the help you guys provide.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.radius-container div {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
  
  .radius-container div:first-child {
    margin-right: 1%;
  }
  
  .radius {
    padding-top: 11em;
    height: 30em;
    text-align: center;
    border: 1px solid #858280;
    display: block;
    border-radius: 50%;
    width: 100%;
  }
  
  .radius3 {
    position: relative;
    padding-top: 10%;
    height: 15em;
    width: 50%;
    text-align: center;
    border: 1px solid #858280;
    border-left: 0;
    border-bottom: 0;
    border-top-right-radius: 100%;
    display: block;
    margin-left: 15em;
  }
  
  .radius3 p {
    position: absolute;
    right: 50%;
    top: 65%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="radius-container"&gt;
    &lt;div&gt;&lt;span class="radius"&gt;&lt;p&gt;SERBIAN&lt;br&gt;100%&lt;/p&gt;&lt;/span&gt;&lt;/div&gt;
    &lt;div&gt;&lt;span class="radius"&gt;&lt;p&gt;ENGLISH&lt;br&gt;100%&lt;/p&gt;&lt;/span&gt;&lt;/div&gt;
    &lt;div&gt;&lt;span class="radius3"&gt;&lt;p&gt;GERMAN&lt;br&gt;25%&lt;/p&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>See also this <a href="https://jsfiddle.net/0v0srgb6/" rel="nofollow noreferrer">jsFiddle</a></p>