Question

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

Answer 1

重要！ 垂直中心相对于父的身高

如果您尝试居中的元素的父级没有定义垂直居中解决方案的高度，无将起作用！

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

您可以使用新的flexbox & size utilities制作container全高和display: flex。这些选项不需要额外的CSS （除了容器的高度（即：html，body）必须是100％）。

Flexbox子项

上的选项1 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

Flexbox父级的选项2 align-items-center （.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

Flexbox父级的选项3 justify-content-center （.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和other utilities，有许多垂直方法对准。 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>

Vertical Center Using Auto Margins Demo

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>

Vertical Center Different Height Columns Demo

See this Q/A to center, but maintain equal height

3 - 垂直中心使用Display Utils：

Bootstrap 4有display utils，可用于display:table，display:table-cell，display:inline等。这些可以与vertical alignment 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>

Vertical Center Using Display Utils Demo

更多示例
Vertical center image in <div>
Vertical center .row in .container
Vertical center and bottom in <div>
Vertical center child inside parent
Vertical center full screen jumbotron

重要！ 我提到了身高吗？

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

body,html { height: 100%; }

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

另见：
Vertical alignment in bootstrap 4
Bootstrap 4 Center Vertical and Horizontal Alignment

Answer 2

您可以通过使父容器展开并添加align-items:center：

来垂直对齐容器

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

Updated Pen

Answer 3

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

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

Answer 4

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

Answer 5

由于以上都不适合我，因此我添加了另一个答案。

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

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

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

第3步：使用justify-content-center类将div水平居中。

第4步：使用align-items-center

将div垂直居中

第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 6

在Bootstrap 4（测试版）中，使用align-middle。请参阅Bootstrap 4 Documentation on Vertical alignment：

使用 vertical-alignment 更改元素的对齐方式   公用事业。请注意，vertical-align仅影响内嵌，   内联块，内联表和表格单元格元素。

从.align-baseline，.align-top，.align-middle，.align-bottom中选择，   <{1}}，.align-text-bottom根据需要。

Answer 7

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>  
<div class="container">
    <div class="row align-items-center justify-content-center" style="height:100vh;">     
         <div>Center Div Here</div>
    </div>
</div>
</body>
</html>

Answer 8

垂直对齐使用此引导程序4个类：

父级：d表

AND

child：d-table-cell和align-middle和文本中心

例如：

<div class="tab-icon-holder d-table bg-light">
   <div class="d-table-cell align-middle text-center">
     <img src="assets/images/devices/Xl.png" height="30rem">
   </div>
</div>

，如果您希望父母成为圈子：

<div class="tab-icon-holder d-table bg-light rounded-circle">
   <div class="d-table-cell align-middle text-center">
     <img src="assets/images/devices/Xl.png" height="30rem">
   </div>
</div>

这两个自定义css类如下：

.tab-icon-holder {
  width: 3.5rem;
  height: 3.5rem;
 }
.rounded-circle {
  border-radius: 50% !important
}

最终用法例如：

<div class="col-md-5 mx-auto text-center">
    <div class="d-flex justify-content-around">
     <div class="tab-icon-holder d-table bg-light rounded-circle">
       <div class="d-table-cell align-middle text-center">
         <img src="assets/images/devices/Xl.png" height="30rem">
       </div>
     </div>

     <div class="tab-icon-holder d-table bg-light rounded-circle">
       <div class="d-table-cell align-middle text-center">
         <img src="assets/images/devices/Lg.png" height="30rem">
       </div>
     </div>

     ...

    </div>
</div>

Answer 9

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

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

Answer 10

<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 11

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

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

Answer 12

在您的div上使用ScrollBar（bootsrap4）css类

Answer 13

我是通过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 14

将内容放置在高度为100％（即h-100）的flexbox容器中。然后使用 justify-content-center 类集中证明内容的正确性。

<section class="container h-100 d-flex justify-content-center">
    <div class="jumbotron my-auto">
        <h1 class="display-3">Hello, Malawi!</h1>
    </div>
</section>

Answer 15

<div class="col-lg-5 col-sm-5 offset-1 d-flex">
            <div class="offer-txt justify-content-center align-self-center">
                <span class="inner-title">Our Offer</span>
                <h2 class="section-title">Today’s Special </h2>
                <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>
            </div>
        </div>

Answer 16

在Bootstrap 4.1.3中：

当我尝试将引导程序徽章放在container > row > column标题旁边的h1内时，这对我有用。

起作用的是一些简单的CSS：

.my-valign-center {
  vertical-align: 50%;
}

或

<span class="badge badge-pill" style="vertical-align: 50%;">My Badge</span>

Answer 17

在 Bootstrap 5 中，我们可以轻松完成。以下是对齐卡片的示例。我们只需要设置卡片宽度，其余设置使用 bootstrap 5 类。

<div class="container d-flex vh-100">
  <div class="row mx-auto">
    <div class="col align-self-center p-4">
      <div class="card rounded-3 shadow-sm p-3" style="width:400px">
        <div class="card-body">
          <h1>I'am centered vertically and horizontally</h1>
        </div>
      </div>
    </div>
  </div>
</div>

Bootstrap中的垂直对齐中心4

17 个答案: