html - 如何在 Bootstrap 中垂直居中一个 div

Question

我刚开始使用 Bootstrap，我想要一个垂直居中的 div。 一个 顶部和底部边距相等的 div(不是内容)。 我可以通过使用 position:absolute; 来实现，但我想通过 Bootstrap 方式实现它。

到目前为止，这是我的标记:

<div class="container">
  <div class="row">
    <div id="home" class="well well-lg col-lg-8 col-lg-offset-2">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus nisl non tortor hendrerit, ultrices volutpat velit lobortis. Donec blandit non ligula sed eleifend. Aliquam erat volutpat. Aliquam ac libero id elit pellentesque bibendum. Morbi lacinia ut ante in semper. Quisque eu urna aliquam, ultrices mauris ut, commodo mauris. Proin leo risus, congue quis turpis vitae, sagittis pulvinar ipsum. Aliquam tempor sapien ipsum, non iaculis mauris accumsan ut. Nullam dapibus ligula eu ante pellentesque, eget tristique ligula sodales. Quisque eleifend massa nec erat blandit aliquet.

      Phasellus consequat turpis hendrerit, venenatis dolor id, pharetra metus. Proin interdum vestibulum urna, rutrum dapibus mauris dapibus a. Cras scelerisque massa non nisi tempus porta. Nullam faucibus a nunc eget aliquet. Duis auctor purus et commodo porttitor. Quisque et commodo turpis. Duis tristique convallis sem, id ultrices diam elementum sed. Nullam adipiscing, nunc eget ornare molestie, turpis sapien luctus lectus, sed vestibulum sapien urna a justo. Curabitur at eros non nulla ornare porttitor. Curabitur ac tortor blandit, dapibus risus dictum, aliquam ligula. Nunc ultrices faucibus nibh, vel sagittis tortor mollis convallis. Ut pretium tortor id pellentesque hendrerit. Aliquam erat volutpat.
      <!--<div id="_prcButtons">
        <input type="button" id="_proceed" class="btnConfirm" title="Answer the question" value="I wholeheartedly agree">
        <input type="button" id="_rd" class="btnConfirm" title="Redirect to Google" value="I strongly disagree">
      </div>-->
    </div>
  </div>
</div>

jsFiddle
我希望有人可以帮助我。

干杯!

Answer 1

你在找这样的东西吗

DEMO

html, body, .container {
    height: 100%
}
.container {
    display: table;
}
.row {
    display: table-cell;
    vertical-align: middle;
}