Question

我试图在jumbotron中垂直对齐容器div。

因为容器的高度（以及jumbotron也是如此）变量top: 50%; margin-top: -'height * 0.5'不会起作用。

＆＃13;

@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 */
  }

＆＃13;

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

＆＃13;

Answer 1

你应该使用填充中心，这是default way的做法;

＆＃13;

@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 */
  }

＆＃13;

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

＆＃13;

Answer 2

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

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

离

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

有几种方法可以让内容垂直对齐。我在这里发布一个常见的和最近的技巧。

将position: relative;提供给父元素。
给孩子：

.child-element { 位置：绝对; 最高：50％; 左：50％; transform：translate（-50％， - 50％）; }

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

Bootstrap中的垂直对齐响应容器

3 个答案: