自举中的垂直alignment中心4

我正在尝试使用Bootstrap 4将我的容器居中放置在页面中间。到目前为止，我一直没有成功。 任何帮助，将不胜感激。

我已经在Codepen.io上build立起来了，所以你们可以用它玩，让我知道什么是有用的 ，因为我的想法是…

编辑 – [已解决]

将以下内容添加到我的CSS的顶部解决了问题：

html, body { height:100%; } body { display:flex; align-items:center; } 

另外，在Bootstrap 4（alpha）中：

将类d-flex align-items-center h100到父级也解决了这个问题，并且是更加Bootstappy方法。 注意这和前面提到的方法是一样的。

解决了@Pete，@ZimSystems以及其他

Answer 1

您可以使用新的Flexbox和尺寸实用工具将container全高并display: flex 。 这些选项不需要额外的CSS （除了容器的高度（即：html，body）必须是100％ ）。

选项1（flexbox align-self-center ）

 <div class="container d-flex h-100"> <div class="row justify-content-center align-self-center"> I'm vertically centered </div> </div> 

http://codepen.io/anon/pen/PWLQME

选项2（flexbox align-items-center ）在父级上

 <div class="container d-flex align-items-center h-100"> <div class="row justify-content-center"> I'm vertically centered </div> </div> 

---

有关Bootstrap 4垂直居中的更多信息

现在Bootstrap 4提供了flexbox和其他工具 ，有很多方法可以垂直alignment。 http://www.codeply.com/go/WG15ZWC4lf

1 – 使用自动边距的垂直中心：

垂直居中的另一种方法是使用my-auto 。 这将使元素在其容器中居中。 例如， h-100使行全高， my-auto将垂直居中col-sm-12列。

 <div class="row h-100"> <div class="col-sm-12 my-auto"> <div class="card card-block w-25">Card</div> </div> </div> 

垂直中心使用自动边距演示

my-auto表示垂直y轴上的边距，相当于：

 margin-top: auto; margin-bottom: auto; 

---

2 – 带有Flexbox的垂直中心：

由于Bootstrap 4 .row现在display:flex您可以简单地使用任何列上的align-self-center垂直居中…

  <div class="row"> <div class="col-6 align-self-center"> <div class="card card-block"> Center </div> </div> <div class="col-6"> <div class="card card-inverse card-danger"> Taller </div> </div> </div> 

或者，在整个.row上使用align-items-center垂直居中alignment行中的所有列。

  <div class="row align-items-center"> <div class="col-6"> <div class="card card-block"> Center </div> </div> <div class="col-6"> <div class="card card-inverse card-danger"> Taller </div> </div> </div> 

垂直中心不同高度的列演示

---

3 – 垂直中心使用显示器Utils：

引导程序4具有可用于显示的显示实用程序display:table ， display:table-cell ， display:inline等。这些可以与垂直alignment应用程序一起使用，以alignment内联，内嵌块或表格单元格元素。

 <div class="row h-50"> <div class="col-sm-12 h-100 d-table"> <div class="card card-block d-table-cell align-middle"> I am centered vertically </div> </div> </div> 

使用Display Utils Demo的垂直中心

Answer 2

您可以通过使父容器弹性并添加align-items:center来垂直alignment容器align-items:center ：

 body { display:flex; align-items:center; } 

更新的笔

Answer 3

 .jumbotron { position: relative; top: 50%; transform: translateY(-50%); } 

Answer 4

在Bootstrap 4（beta）中，使用align-middle 。 有关垂直alignment的信息，请参阅Bootstrap 4 ：

使用垂直alignment实用程序更改元素的alignment方式 。 请注意，垂直alignment仅影响内联 ， 内联块 ， 内联表和表格单元格元素。

根据需要从.align-baseline ， .align-top ， .align-middle ， .align-bottom ， .align-text-bottom和.align-text-top中进行select。