title: css div center multi-line text vertically and horizontally with a background image
body: <p>I have searched Stackoverflow and cannot find a solution that works.</p>
  
  <p>Seems that centring vertically AND horizontally in a div is hard.</p>
  
  <p>I'm using this css:</p>
  
  <pre><code>.title {
      font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;
      font-size: 400%;
  }
  
  .subtitle {
      font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;
      font-size: 150%;
  }
  
  .subnote {
      font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;
      font-size: 75%;
  }
  
  .outer {
      display: table;
      position: absolute;
      height: 100%;
      width: 100%;
  }
  
  .middle {
      display: table-cell;
      vertical-align: middle;
  }
  
  .innie {
      width: 1000px;
      height: 515px;
      background-image: url("bkgrnd3.png");
      position:absolute;
      left:50%;
      top:50%;
      margin: -257px 0 0 -500px;
      text-align: center;
  }
  </code></pre>
  
  <p>and this html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Timothy Eldon Official&lt;/title&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;link rel="stylesheet" type="text/css" href="eldon.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="outer"&gt;
              &lt;div class="middle"&gt;
                  &lt;div class="innie"&gt;
                      &lt;span class="title"&gt;
                          Timothy Eldon
                      &lt;/span&gt;
                      &lt;br/&gt;
                      &lt;span class="subtitle"&gt;
                          Author
                      &lt;/span&gt;
                      &lt;br/&gt;
                      &lt;span class="subnote"&gt;
                          (amateur)
                      &lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It centres everything on the page relatively, but I cannot get the text centred vertically.</p>
  
  <p>There seems to be lots of ideas, but I've tried several and nothing works.</p>