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/

使用bootstrap进行水平/垂直对齐

1 个答案: