Issue When Centering Vertically with Flexbox When Heights Are Unknown

body {  margin: 0;}.flex-container {  display: flex;  flex-wrap: wrap;}.color_1 {  background: tomato;}.color_2 {  background: LightGreen;}.color_3 {  background: PowderBlue;}.color_4 {  background: SteelBlue;}.flex-item {  flex: 1 0 auto;  width: 50%;  height: 50vh;  display: flex;  justify-content: center;  align-items: center;}

<div class="flex-container">  <div class="flex-item color_1"><div class="inner">inner</div></div>  <div class="flex-item color_2"><div class="inner">inner</div></div>  <div class="flex-item color_3"><div class="inner">inner</div></div>  <div class="flex-item color_4"><div class="inner">inner</div></div></div>

How to vertically and horizontally center a div of unknown height

Using a flexbox, here's all the code you need:

HTML

<div class="container">
    <div class="content">
        <div class="title-class">Hello there</div>
    </div>
</div>

CSS

html, body { height: 100%; }

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: violet;
    height: 100%;
}

.content {
    background-color: violet;
    width: 50%;
    text-align: center;
    box-shadow: 0px 1px 7px 1px rgba(0, 0, 0, 1);

}

DEMO

As an alternative, here's the table method:

• How to Center Elements Vertically, Horizontally or Both

Vertical centering issue with flexbox and CSS3 width/height declarations

You have your header in the wrong place, try this

<div class="pageWrap"><!-- Primary content first for SEO purposes. Use CSS to rearrange secondary elements -->


          <header>

                <nav>
                </nav>

        </header>
     <main role="main">

                <section></section>
                <section></section>
                <section></section>
                <section></section>

            </main>

            <footer>
            </footer>

        </div>

        <div class="navWrap"><!-- Place less important HTML after main content (My brain hurts!)-->


            <nav class="pagesNav next">

                <span class="arrow"></span>
                <span class="arrow"></span>

            </nav>

        </div>

css

    html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

html, body {
  height: 100%;
}

body {

}

/* Temp styles */

.pageWrap {

}

main {
    max-width: 1920px;
    height: 100%;
    margin: 0 auto;
}

section {
    height: 100vh;
    width: 100%;
    background: white;
}

section:first-child {
    height: 95vh;
}

section:nth-child(even) {
    background: yellow;
}

footer {
    height: 300px;
    background: red;
}

/* Less important info */
header{
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center; 

    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; 

    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;   

}
.navWrap {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center; 

    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; 

    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh; 
}

header {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
    width: 100%;
    height: 70px;
    background: green;
}

nav:not(.pagesNav) {
}

.pagesNav { 
    margin-left: auto;

    width: 80px;
    height: 155px;

    background: #414141;
}

here is the fiddle https://jsfiddle.net/L4u9t78m/2/

IE flexbox vertical align center and min-height

If you are open to detecting and applying different CSS to ie11, you could do something like the following:

fiddle

.banner {  background: #ccc;  padding: 10px 20px;  display: flex;  align-items: center;  justify-content: center;  min-height: 60px;  flex-direction: column;}
@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none) {  .banner span {    display: table-cell;    min-height: 60px;    vertical-align: middle;  }}

<div id="section-title-1" class="banner banner--theme-1 js-section-title" data-title="Section Title">  <span>IE is bobbins</span></div>

justify-content: center;