如何在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;
}

Answer 2

this這是否可行？ #home { display: inline-block; vertical-align: middle; float: none; }

或在CSS中，您可以這樣做：

display: table-cell;
vertical-align: middle;

這里的工作示例： http : //jsbin.com/sociloke/2/edit

Answer 3

http://jsfiddle.net/3ZepD/1/

使用table-cell和vertical-align 。

為了更好地理解，我添加了height ，可以將其刪除。