使用引导程序垂直/水平对齐

Question

我已经问过几次这个问题，但是没有人能够解决我的问题。

我的问题是我无法使标题完全位于整个页面背景的中央。

但是，有一种方法可以起作用（在header标记中已注释），但在完全兼容浏览器时会遇到问题。

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

首先，将您的此类.vcenter CSS代码更改如下：

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

希望能有所帮助。

使用引导程序垂直/水平对齐

问题描述

4 个解决方案

解决方案1
2 已采纳 2015-01-16 13:35:08

解决方案2
0 2015-01-16 13:28:22

解决方案3
0 2015-01-16 13:48:28

解决方案4
0 2015-01-16 14:00:37

使用引导程序垂直/水平对齐

问题描述

4 个解决方案

解决方案1 2 已采纳 2015-01-16 13:35:08

解决方案2 0 2015-01-16 13:28:22

解决方案3 0 2015-01-16 13:48:28

解决方案4 0 2015-01-16 14:00:37

解决方案1
2 已采纳 2015-01-16 13:35:08

解决方案2
0 2015-01-16 13:28:22

解决方案3
0 2015-01-16 13:48:28

解决方案4
0 2015-01-16 14:00:37