Question

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

我遇到的问题是我无法将标题完全集中放在整页背景中。

但是有一种方法可以正常工作（在标头标记中注释掉）但在完全兼容浏览器时会遇到问题。

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添加到容器的父级，并{{1 （以及已存在的display: table-cell）到容器本身（在您的情况下：vertical-align: middle）

<header>

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

＆＃13;

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

＆＃13;

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

＆＃13;

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 个答案: