如何垂直放置Bootstrap容器？

Question

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

演示： https : //jsfiddle.net/yunr225g/

HTML：

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

CSS：

body {
  margin: 10px;
  background:black;
}
button {
  display:block;
  text-align:center;
  margin:0 auto;
  margin:60px auto;
  background:black;
  border:2px solid #ffca00;
  padding:30px;
  width:250px;
  color:#ffca00;
  text-transform:uppercase;
}

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