css div center multi-line text vertically and horizontally with a background image
<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>