title: How do I vertically center text with CSS?
body: <p>I have a <code>&lt;div&gt;</code> element which contains text and I want to align the contents of this <code>&lt;div&gt;</code> vertically center.</p>
  <p>Here is my <code>&lt;div&gt;</code> style:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#box {
    height: 170px;
    width: 270px;
    background: #000;
    font-size: 48px;
    color: #FFF;
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="box"&gt;
    Lorem ipsum dolor sit
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>What is the best way to achieve this goal?</p>