Bootstrap 中的垂直对齐响应容器

Question

我正在尝试垂直对齐超大屏幕内的容器 div。

因为容器的高度（超大屏幕也是如此）是可变的 top: 50%; margin-top: -'height * 0.5' 将不起作用。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css');
 .banner {
  padding: 48px 0px 48px 0px;
  text-align: center;
}
.banner:after {
  content: "";
  display: block;
  padding-top: 12.5%;
}

  .container {
  background: red !important; /* For testing vertical alignment */
  }

<header class="jumbotron banner">
  <div class="container">
    <h1>Title</h1>

    <p>Subtitle</p>
    <p> <a class="btn btn-lg btn-primary" href="#" role="button">Button</a>

    </p>
  </div>
</header>

Answer 1

要使 div 垂直居中对齐，您可以使用 css like

position: relative;
top: 50%;
transform: translatey(-50%);

前

.outer{
    height:100px;
    background:gray;
}
.inner{
    background:green;
    position:relative;
    top:50%;
    transform:translatey(-50%);
}

<div class="outer">
    <div class="inner" >
                  <p>sample text</p>
        </div>
</div>

Answer 2

您可以通过多种方式使内容垂直对齐。我在这里发布一个常见且最新的技巧。

将 position: relative; 赋给 parent 元素。
到child:

.child-element { 位置：绝对；顶部：50%；左：50%；转换：翻译（-50%，-50%）； }

如果您需要进一步的帮助，请参阅 JSFIDDLE 并在下方发表评论。

Answer 3

您应该使用填充将其居中，这就是 default way 的做法；

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css');
 .banner {
  padding: 5% 0px;
  text-align: center;
}
.banner:after {
  content: "";
  display: block;
  
}

  .container {
  background: red !important; /* For testing vertical alignment */
  }

<header class="jumbotron banner">
  <div class="container">
    <h1>Title</h1>

    <p>Subtitle</p>
    <p> <a class="btn btn-lg btn-primary" href="#" role="button">Button</a>

    </p>
  </div>
</header>

Bootstrap 中的垂直对齐响应容器

Vertical align responsive container in Bootstrap

html

css

twitter-bootstrap

vertical-alignment