title: Center align a <p> in <div>
body: <p>I have the following CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>#slot {
      width: 70px;
      height: 25px;
      line-height: 25px;
      border: 2px solid black;
      background-color: #00ffee;
      padding: 1px;
      overflow: hidden;
  }
  
  #element {
      text-align: center;
  }
  </code></pre>
  
  <p>And HTML:</p>
  
  <pre><code>&lt;div id="slot"&gt;
      &lt;p id="element"&gt;100 &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I would like the <code>&lt;div&gt;</code> to be of fixed size, and whatever number is in <code>&lt;p&gt;</code> (only numbers will be inserted there), I would like to have them centered right in the middle without changing the size of the bigger <code>&lt;div&gt;</code>.</p>
  
  <p>I already set the <code>height</code> of the div to what I want, but having <code>line-height</code> in there has an advantage and a disadvantage. The advantage is that the number finally appears centered right in the middle. The disadvantage is that when I remove the number (it's an empty <code>&lt;p&gt;</code>), the <code>&lt;div&gt;</code>'s height shrinks.</p>
  
  <p>How can I achieve my goal?</p>
  
  <p>EDIT:
  I used min-height and that fixed the issue. My issue now is that the content of the div doesn't appear in the middle and is cut like this:</p>
  
  <p><img src="https://i.stack.imgur.com/T8GTi.png" alt="slot"></p>
  
  <p>Why is this happening? This is very weird because jsfiddle shows it correctly.</p>
  
  <p><strong>Happens on all browsers</strong>.</p>