CSS positioning not centering in IE but is in Chrome - html

Question

Hi my friend is having trouble centering the text in the middle of the margins.
When I look at this site in IE 11 it just doesn't seem to center, could some one help me as to why?
<header id="site-header" class="site-header valign-center">
<div class="intro">
<h2>x</h2>
<p> y </p>
<h1>z</h1>
<a class="btn btn-white" data-scroll href="#foo">button</a>
</div>
</header>
The CSS:
.site-header {
width: 100%;
height: 100%;
min-height: 100vh;
position: relative;
text-align: center;
background: url(../images/backgrounds/header.jpg) no-repeat center center/cover;
}
.valign-center {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.site-header .intro {
color: #fff;
position: relative;
text-align: center;
text-transform: uppercase;
width: 100%;
z-index: 1;
padding: 0 15px;
}
I've tried margin: 0 auto; but it doesn't change.
Many Thanks,

Answer 1

Add html, body { height: 100%; }
html,body {
height: 100%;
}
.site-header {
width: 100%;
height: 100%;
min-height: 100vh;
position: relative;
text-align: center;
background: url(../images/backgrounds/header.jpg) no-repeat center center/cover;
}
.valign-center {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.site-header .intro {
position: relative;
text-align: center;
text-transform: uppercase;
width: 100%;
z-index: 1;
padding: 0 15px;
}
<header id="site-header" class="site-header valign-center">
<div class="intro">
<h2>x</h2>
<p> y </p>
<h1>z</h1>
<a class="btn btn-white" data-scroll href="#foo">button</a>
</div>
</header>
Or you can just use height: 100vh on .site-header
.site-header {
width: 100%;
height: 100vh;
position: relative;
text-align: center;
background: url(../images/backgrounds/header.jpg) no-repeat center center/cover;
}
.valign-center {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.site-header .intro {
position: relative;
text-align: center;
text-transform: uppercase;
width: 100%;
z-index: 1;
padding: 0 15px;
}
<header id="site-header" class="site-header valign-center">
<div class="intro">
<h2>x</h2>
<p> y </p>
<h1>z</h1>
<a class="btn btn-white" data-scroll href="#foo">button</a>
</div>
</header>