Bootstrap中的垂直对齐中心4

Question

我正在尝试使用Bootstrap 4将我的Container放在页面中间.

Answer 1

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

如果你想中心元素的父一直没有明确的 高度,没有垂直居中的解决方案将工作!

现在,在Bootstrap 4的垂直居中......

您可以使用新的flexbox和size实用程序来创建container全高和display: flex.这些选项不需要额外的CSS(除了容器的高度(即:html,body)必须是100%).

align-self-centerflexbox child上的选项1

<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

align-items-centerflexbox父级的选项2(.row是display: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

justify-content-centerflexbox父级的选项3(.card是display: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>

或者,使用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>

垂直中心不同高度列演示

请参阅此Q/A以居中,但保持相同的高度

3 - 垂直中心使用Display Utils:

自举4具有显示utils的,可以被用于display:table,display:table-cell,display:inline等.这些可以与使用垂直取向utils的对准内联的,内联块或表格单元格的元件.

<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>
.row in .container
垂直中心和底部<div>
垂直中心儿童内部父
垂直中心全屏jumbotron

重要! 我提到身高吗？

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

body,html {
  height: 100%;
}

或者min-height: 100vh在父/容器上使用.如果要将子元素置于父元素中心.父级必须具有已定义的高度.

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

Answer 2

使用 bootstrap 版本 5 或更高版本，使用下面的代码将内容水平和垂直居中。

<div class="vh-100 d-flex justify-content-center align-items-center">
  <h1>Centered horizontally and vertically!</h1>
</div>

Answer 3

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

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

更新了笔

Answer 4

以下引导4个课程帮我解决了这个问题

<div class="col text-center justify-content-center align-self-center">
    <img width=3rem src=".." alt="...">
</div>

Answer 5

我用 Bootstrap 这样做了4.3.1：

<div class="d-flex vh-100">
  <div class="d-flex w-100 justify-content-center align-self-center">
    I'm in the middle
  </div>
</div>

Answer 6

由于以上都不对我有用，因此我添加了另一个答案。

目标：使用bootstrap 4 flexbox类在页面上垂直和水平对齐div。

步骤1：将最外面的div设置为100vh。这会将高度设置为Veiwport高度的100％。如果您不这样做，则别无选择。将其设置为的高度100%仅相对于父级，因此，如果父级不是视口的整个高度，则没有任何效果。在下面的示例中，我将“主体”设置为100vh。

步骤2：将容器div设置为带有d-flex类的flexbox容器。

第3步：在justify-content-center课堂上将div水平居中。

第4步：将div垂直居中 align-items-center

第5步：运行页面，查看垂直和水平居中的div。

请注意，不需要在居中的div本身（子div）上设置特殊的类

<body style="background-color:#f2f2f2; height:100vh;">

<div class="h-100 d-flex justify-content-center align-items-center">
    <div style="height:600px; background-color:white; width:600px;">
</div>

</div>

</body>

Answer 7

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

Answer 8

<div class="row">
  <div class="col-md-6">
     <img src="/assets/images/ebook2.png" alt="" class="img-fluid">
  </div>
  <div class="col-md-6 my-auto">
     <h3>Heading</h3>
     <p>Some text.</p>
   </div>
</div>

这一行是魔法发生的地方<div class="col-md-6 my-auto">，它my-auto将使列的内容居中。这对于像上面的代码示例这样的情况非常有用，在这种情况下，您可能有一个可变大小的图像，并且需要将列中的文本与它对齐。

Answer 9

我已经尝试了这里的所有答案，但发现这里是h-100和 vh-100之间的区别 这是我的解决方案：

      <div className='container vh-100 d-flex align-items-center col justify-content-center'>
        <div className="">
             ...
        </div>
      </div >

Answer 10

<div class="col-lg-5 col-sm-5 offset-1 d-flex">\n            <div class="offer-txt justify-content-center align-self-center">\n                <span class="inner-title">Our Offer</span>\n                <h2 class="section-title">Today\xe2\x80\x99s Special </h2>\n                <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly.</p>\n            </div>\n        </div>\n

\n\n

\n