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>

或者你可以只在.site-header上使用height: 100vh

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