IEでセンタリングしていないがChromeにあるCSSの配置

Question

こんにちは私の友人は、余白の真ん中にテキストのセンタリングに問題があります。

私はIE 11でこのサイトを見ると、ちょうど中心に見えません。なぜか、私に何か助けてくれますか？

<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> 

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; 
} 

私はmargin: 0 auto;を試みたが、それは変更されません。

Answer 1

が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>

を追加したり、あなただけの.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>

に height: 100vhを使用することができます

多くのおかげで、