CSS-Positionierung nicht zentriert in IE aber ist in Chrome

Question

Hallo mein Freund hat Probleme mit dem Zentrieren des Textes in der Mitte der Ränder.

Wenn ich diese Seite in IE 11 anschaue, scheint sie nicht zentriert zu sein, könnte mir jemand helfen, warum?

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

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

Ich habe versucht margin: 0 auto; aber es ändert sich nicht.

Vielen Dank,

Answer 1

hinzufügen 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>

Oder Sie können height: 100vh nur verwenden, um auf .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>