对准纵向/横向使用自举(Align vertically / horizontally using

我问过这个问题，现在几次，但没有人能解决我的问题。

我的问题是，我不能得到的头一个全页的背景内完全集中坐。

然而，有一个方法，可以使用（在头标记注释），但所面临的问题来全浏览器的兼容性时。

HTML

<body>
    <div class="container-fluid text-center">
        <header role="banner" id="banner" class="vcenter">
            <h1>Fix this</h1>
            <h2>Bootstrap/css</h2>
            <h3>Please</h3>
        </header>
    </div>
</body>

CSS（其余的是在的jsfiddle ）

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

我已经做了的jsfiddle尝试描述我所面临的问题。注意，背景图像已被更改为纯色。 http://jsfiddle.net/wesbbtqn/

如果有人能解决这个问题，我将是巨大的感谢，因为它已被窃听我的年龄。

编辑 - 高度和宽度必须保持灵活。

Answer 1:

如果我得到正确的你问：

水平居中：

只需添加text-align: center到H1，H2和H3。

垂直居中：

纯CSS来实现这一目标，在支持跨浏览器的方式，并没有设定一个办法明确容器的高度是添加display: table到容器的父，并display: table-cell （与已经存在沿vertical-align: middle ）该容器本身（你的情况： <header> ）

.vcenter {
    vertical-align: middle;
    display: table-cell;
}

http://jsfiddle.net/wesbbtqn/3/

Answer 2:

您是否正在寻找这样的：

http://jsfiddle.net/shannabarnard/wesbbtqn/4/

我所做的只是添加

text-align: center;
width: 90%;
height: 50%;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

你报头的CSS。

Answer 3:

 html, body { height: 100%; } header { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; }

 <header> <h1>Fix this</h1> <h2>Bootstrap/css</h2> <h3>Please</h3> </header>

Answer 4:

首先，改变你的CSS代码该类.vcenter是这样的：

.vcenter {
   display: inline;
   vertical-align: middle;
   float: none;
   text-align:center;
}

然后，在你的容器元素添加新的类，是这样的<div class="container-fluid text-center page-container">

在你的CSS覆盖添加新类height:100%; 从.container-fluid ：

.page-container{
   height:auto !important;
}

希望帮助。

文章来源: Align vertically / horizontally using bootstrap