使用 bootstrap 垂直/水平对齐

Question

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

我遇到的问题是我无法让 header 完全位于整页背景的中央。

然而，有一种方法确实有效（在 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

你在找这个吗：

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;

给你的 header css.

Answer 2

如果我没听错你的问题：

水平居中：

只需将 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 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

首先，将此 class .vcenter 的 css 代码更改为如下所示：

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

然后，在您的容器元素中添加新的 class，就像这样 <div class="container-fluid text-center page-container">。

并在 css 中添加新的 class 以覆盖 .container-fluid 中的 height:100%;:

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

希望能有所帮助。

使用 bootstrap 垂直/水平对齐

Align vertically / horizontally using bootstrap

html

css

jquery

twitter-bootstrap