JSFiddle - React, Tailwind, and code Playground

HTML

<header role="banner" id="banner">
    <div class="not-fullscreen background bgheader1"" data-img-width="1600" data-img-height="1064">
        <div class="content-a">
            <div class="content-b">
                <h1>Manchester Metropolitan University</h1>
                <h2>Course Information</h2>
            </div>
        </div>
    </div>
</header>

CSS

html, body{
    height: 100%;
}
body{
    margin: 0;
}
header {
    min-height:50%;
    height:50%;
    width:100%;
    background:#eee;
}
.fullscreen,
.content-a {
    width:100%;
    min-height:100%;
}
.not-fullscreen,
.not-fullscreen .content-a,
.fullscreen.not-overflow,
.fullscreen.not-overflow .content-a {
    height:100%;
    overflow:hidden;
    min-height:50%;
}

/* content centering styles */
.content-a {
    display:table;
        height:50%;
}
.content-b {
    display:table-cell;
    position:relative;
    vertical-align:middle;
    text-align:center;
}