JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
            <div id="top">
                <div class="container-fluid text-center">
                    <div id="top-rectangle" class="mid">
                    <div class="outer">
                    <div class="middle">
                    <div class="innder">
                            <p>
                            Hello, text and text.
                            </p>
                            <p>
                            More text
                            </p>
                    </div>
                    </div>
                    </div>
                    </div>
                </div>
            </div>
</div>

CSS

body {
        height: 100%;
        margin: 0;
}
#wrapper {
        display: table;
        width: 100%;
}
#top {
        height: 0;
        display: table-row;
        vertical-align: middle;
}
#top-rectangle {
  display:block;
        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;
        width: 100%;
        text-align: center;
        margin: auto;
}
/*
.midSecion{
        text-align: center;
        vertical-align: middle;
        display: table-cell;
}
*/

.outer {
    display: table;
    position: absolute;
    height: 450px;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto; 
    width: /*whatever width you want*/;
}