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

如果这有效，请查一下？ #home { display: inline-block; vertical-align: middle; float: none; }

或者你可以这样做：

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

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

Answer 3

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

使用table-cell和vertical-align。

为了更好地理解我添加了height，您可以删除它。

如何在Bootstrap中垂直居中div

3 个答案: