I'm trying to center text on a div vertically and horizontally
<p>As I said in the title, I am trying to center the text on a div - vertically and horizontally, but without success. Please check my code and help me to see where the problem is.</p>

<p><strong>HTML Code:</strong></p>

<pre><code>&lt;div id="wrapper"&gt;
        &lt;div id="top"&gt;
            &lt;div class="container-fluid text-center"&gt;
                &lt;div id="top-rectangle" class="mid"&gt;
                        &lt;p&gt;
                        Hello, text and text.
                        &lt;/p&gt;
                        &lt;p&gt;
                        More text
                        &lt;/p&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
</code></pre>

<p></p>

<p><strong>CSS Code:</strong></p>

<pre><code>body {
        height: 100%;
        margin: 0;
}
#wrapper {
        display: table;
        width: 100%;
}
#top {
        height: 0;
        display: table-row;
        vertical-align: middle;
}
#top-rectangle {
        height: 450px;
        background-image:  url("http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg");
        background-size: cover;
        color: white;
}
.midSection {
        text-align: center;
        vertical-align: middle;
        display: table-cell;
}
</code></pre>

<p><strong>JSFIDDLE:</strong>
<a href="https://jsfiddle.net/krgtdomh/" rel="nofollow">https://jsfiddle.net/krgtdomh/</a></p>

<p>Note: Please know that I searched an answer and I saw some, but I still don't understand whats wrong with my code that the text doesn't center.</p>