Question

如何垂直居中此Bootstrap容器div？我想要它，所以我查看页面垂直居中的页面，黑色在我的div上方和下方。

HTML：

OPTIONS

CSS：

<div class="container">
  <div class="row">
    <div class="col-md-6 text-center">
      <img src="http://placehold.it/250x250">
      <button type="submit">Stay</button>
    </div>
    <div class="col-md-6 text-center">
      <img src="http://placehold.it/250x250">
      <button type="submit">Leave</button>
    </div>
  </div>
</div>

Answer 1

首先，您必须将容器的所有父元素设置为height:100%，或直接使用height:100vh。然后，使用position + transform技巧将其垂直居中。

这在较大的屏幕上效果很好，您可能需要通过媒体查询来调整它，为较小的屏幕设置断点。

html, body {
  height: 100%;
}
body {
  margin: 0;
  background: black;
}
.container {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid red;
}

<强> jsFiddle

或者，尝试这种CSS表方法，它似乎运行良好，并不影响Bootstrap网格。注意，添加了两个额外的div作为包装。

html, body {
  height: 100%;
}
body {
  margin: 0;
  background: black;
}
.container1 {
  display: table;
  width: 100%;
  height: 100%;
}
.container2 {
  display: table-cell;
  vertical-align: middle;
}

<强> jsFiddle

如何垂直居中Bootstrap容器？

1 个答案: