自举中的垂直对齐中心4

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

我已经在Codepen.io上创建了它,所以你们可以使用它,让我知道什么是有用的,因为我的想法是......

编辑 - [答案]

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

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

另外,在Bootstrap 4(alpha)中:

向父级添加类d-flex align-items-center h-100也解决了这个问题,并且是一种更加Bootstrappy的方法。 请注意,这与前述方法的作用相同。

谢谢@Pete,@ZimSystems以及其他人


重要! 垂直中心相对于父级的高度

如果您尝试居中的元素的父元素没有定义的高度 ,则没有任何垂直居中解决方案可行!

现在,在Bootstrap 4中进行垂直居中...

您可以使用新的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>

https://www.codeply.com/go/fFqaDe5Oey

选项2 align-items-center flexbox parent.rowdisplay:flex; flex-direction:row

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="jumbotron">
                I'm vertically centered
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/BumdFnmLuk

选项3在flexbox父justify-content-centerjustify-content-center.carddisplay:flex;flex-direction:column

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="card h-100 border-primary justify-content-center">
                <div>
                    ...card content...
                </div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/3gySSEe7nd


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

现在Bootstrap 4提供了flexbox和其他实用程序,有许多垂直对齐的方法。 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垂直居中对齐该行中的所有.row col-* ...

       <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 - 垂直中心使用显示设备:

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

<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 演示的垂直中心

更多例子
垂直中心图像在<div>
垂直中心在.container中
垂直中心和底部在<div>
父母内部的垂直中心孩子
垂直中心全屏jumbotron


重要! 我提到身高吗?

记住垂直居中是相对于元素的高度而言的 。 如果你想集中整个页面,在大多数情况下,这应该是你的CSS ...

body,html {
  height: 100%;
}

如果你想将一个子元素放在父元素的中间。 父母必须有一个确定的身高

另请参阅:
自举中的垂直对齐4
Bootstrap 4.中心垂直和水平对齐


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

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

更新的笔


.jumbotron {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
链接地址: http://www.djcxy.com/p/75981.html

上一篇: Vertical Align Center in Bootstrap 4

下一篇: How to use vertical align in bootstrap