使用引導程序水平/垂直對齊

Question

我已經看到多個線程解釋了我需要做的事情，其中​​一個已經起作用，我現在面臨的問題是，它在某些瀏覽器上不起作用。 有人可以幫我嗎？

容器流體具有全屏背景，標題標簽位於其中，我希望水平和垂直方向與中心對齊。

HTML

<div class="container-fluid text-center">
<header role="banner" id="banner" >
        <h1>sample</h1>
        <h2>text</h2>
        <h3>bootstrap</h3>

</header>
</div>          

CSS

.container-fluid {
background-image: url(../../images/intro.jpg);
background-repeat:no-repeat;
background-attachment: scroll;
background-position: center center;
background-repeat: none;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
margin:0px;
padding:0px;
height:100%;
}

header {
position:absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-family: Roboto-thin ;
padding: 0px;
margin: 10px;
border-style: none;
color:#ffffff ;
}

謝謝。

Answer 1

而不是使用transform

header{
 position:absolute;
 top: 50%;
 left: 50%;
 width: 500px; /* set a width */
 height: 400px; /* then a height */
 margin-top: -200px; /* set to negative half of your height */
 margin-left: -250px; /* set to negative half of your width */
 font-family: Roboto-thin ;
 padding: 0px;
 border-style: none;
 color:#ffffff;
}

這是一個工作示例： http : //jsfiddle.net/1w6vnqpj/1/