水平垂直居中 bootstrap 4 列连续行

Question

我试图简单地居中对齐容器内的两个 bootstrap 列。列在不同的行中。

网格布局为

<body style="height: 100vh;">
    <div class="container">
        <div class="row">
            <div class="col-6">
                <div class="card">
                    hello
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-4">
                <div class="card">
                    world
                </div>
            </div>
        </div>
    </div>
</body>

卡片只是用来勾勒容器的轮廓。

我知道有很多关于垂直对齐的问题，我可能错过了包含我需要的答案的问题。但我对他们中的大多数人的看法是 parent 需要有一定的高度。
如果您只有一行，则以下内容工作得很好，因为您可以将列居中放置在 100% 高度的行中。但是如果你有两行，就不太好了，因为每一列都在它自己的行中居中，并且每行的高度都是 window.

<body style="height: 100vh;">
    <div class="container h-100">
        <div class="row h-100 justify-content-center align-items-center">
            <div class="col-6">
                <div class="card">
                    hello
                </div>
            </div>
        </div>
        <div class="row h-100 justify-content-center">
            <div class="col-4">
                <div class="card">
                    world
                </div>
            </div>
        </div>
    </div>
</body>

我希望我可以将 justify-content-center align-items-center 移到容器中，但可惜这似乎没有任何作用。

所以，请帮帮我，我怎样才能把这些齐平的东西，一个放在另一个上面，正好放在屏幕中间？

Answer 1

始终通过inner element高度给出高度，如果我在container class元素上给出height，它不会起作用，所以让container 取决于 inner element's 高度，所以这样试试。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container mt-3">
 <div class="col-12" style="min-height: 180px;">
  <div
   class="row bg-success position-absolute w-100 h-100 d-flex flex-row justify-content-center align-items-center">

   <div class="col-6 pr-2">
    <div class="card text-center">
     hello
    </div>
   </div>

   <div class="col-6 pl-2">
    <div class="card text-center">
     world
    </div>
   </div>

  </div>
 </div>
</div>

希望你能理解这个小问题，这样它会对你有所帮助。

Answer 2

这是使用 Bootstrap 在 flexboxes 中构建的一个很好的方法。

<div class="container d-flex h-100 flex-column">
    <div class="flex-grow-1"></div>
    <div class="row justify-content-center">
        <div class="col-3">
            <div class="card">ITEM A</div>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-3">
            <div class="card">ITEM B</div>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-3">
            <div class="card">ITEM C</div>
        </div>
    </div>
    <div class="flex-grow-1"></div>
</div>

我们有两个缓冲区弹性行，flex-grow-1。这些行中的每一行都将扩展（具有相同的权重）以平等地填充顶部和底部。中间的每个内容行都有其内容的高度。

最终结果是 ITEM 卡片在屏幕上垂直和水平居中。因为它们位于单独的行中，所以您可以根据需要调整 margins/padding（默认情况下，它们的卡片最终垂直相邻。

Example screenshot of the above code in bootstrap

你可以用一行+一列和一个内部 flexbox 来实现这一点，但这会让你无法控制各个卡片相对于彼此的显示方式。

编辑：d-flex 使容器成为围绕其子行的弹性容器，而 flex-column 使子项垂直而不是水平呈现和拉伸。

Answer 3

最简单的解决方案是将 行的高度设为 50%...

<body style="height: 100vh;">
    <div class="container h-100">
        <div class="row h-100 justify-content-center align-items-center">
            <div class="col-6">
                <div class="card">
                    hello
                </div>
            </div>
        </div>
        <div class="row h-100 justify-content-center align-items-center">
            <div class="col-4">
                <div class="card">
                    world
                </div>
            </div>
        </div>
    </div>
</body>

演示：https://www.codeply.com/go/7POJtgNaQI

或者， flexbox 方法将使用 Bootstrap flex-grow-1 class.此外，您不需要 body 上的高度。只需在容器上使用 min-vh-100...

<div class="container d-flex flex-column min-vh-100">
    <div class="row flex-grow-1 justify-content-center align-items-center">
        <div class="col-6">
            <div class="card">
                hello
            </div>
        </div>
    </div>
    <div class="row flex-grow-1 justify-content-center align-items-center">
        <div class="col-4">
            <div class="card">
                world
            </div>
        </div>
    </div>
</div>

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

水平垂直居中 bootstrap 4 列连续行

Horizontally and vertically center bootstrap 4 columns in consecutive rows

html

vertical-alignment

centering

flexbox

bootstrap-4