title: Center h1 over image in a div
body: <p>How to center (<strong>vertically,horizontally</strong>) properly  over an image in a ?</p>
  
  <pre><code>&lt;div class="category-info"&gt;
      &lt;div class="image"&gt;
              &lt;h1&gt;Title&lt;/h1&gt;
              &lt;img src="image.jpg" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.category-info {
      text-align: center;
      height: 200px;
      width: 770px;
      overflow: auto;
      margin-bottom: 20px;
  }
  </code></pre>
  
  <p>The image is 770px width and 200px height. I don't what to do next with . I tried several things, without success.</p>
  
  <p><img src="https://i.stack.imgur.com/xKGa0.png" alt="test image"></p>