CSS定位不集中在IE中，但是在Chrome中

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>

或者你也可以只使用height: 100vh上.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>