水平和垂直居中引导连续行中的 4 列答案

【问题标题】：Horizontally and vertically center bootstrap 4 columns in consecutive rows水平和垂直居中引导连续行中的 4 列
【发布时间】：2019-07-10 03:45:34
【问题描述】：

我试图简单地居中对齐并对齐容器内的两个引导列。这些列位于不同的行中。

网格布局是

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

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

我知道有很多关于垂直对齐的问题，我可能错过了包含我需要的答案的问题。但我对他们中的大多数人的看法是，父母需要有一定的身高。
如果您只有一行，则以下内容可以正常工作，因为您可以将列居中在 100% 高度行中。但是如果你有两行，那就不太好了，因为每一列都以自己的行为中心，而每一行都是窗口的高度。

<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 移动到容器中，但可惜这似乎没有任何作用。

那么，请帮帮我，我怎样才能将这些同花顺放在屏幕中间，一个在另一个之上？

【问题讨论】：

总是通过inner element给出高度

标签： html flexbox bootstrap-4 vertical-alignment centering

【解决方案1】：

这是使用 Bootstrap 内置的 flexbox 实现此目的的好方法。

<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 行，带有 flex-grow-1。这些行中的每一行都将扩展（具有相同的权重）以平均填充顶部和底部。中间的每一行内容都有其内容的高度。

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

Example screenshot of the above code in bootstrap

您可以使用一行 + 列和一个内部 flexbox 来执行此操作，但这使您无法控制各个卡片之间的关系。

编辑：d-flex 使容器成为围绕其子行的 flex 容器，而 flex-column 使子级渲染和拉伸垂直而不是水平。

【讨论】：

【解决方案2】：

最简单的解决方案是将行的高度设为 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 类。你也不需要身体的高度。只需在容器上使用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

【讨论】：

【解决方案3】：

总是通过inner element 高度给出高度，如果我在container 类元素上给出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>

希望你能理解这个小小的混乱，所以它会对你有所帮助。

【讨论】：

这会将两列并排放置在同一行内。我这样做没有问题。我正在寻找的是一个在另一个之上，最好是在不同的行中。
这很简单，但是你之前没有提到这个场景
我在我的帖子和标题中多次明确指定一个在另一个之上和不同行中。但是，如果您认为我可以通过某种方式使问题更清楚，请告诉我，我会更新它。
亲爱的 kag0，您没有提到上面的断点行为，并且您在 4 天后到达您的帖子以进行更新，总体而言，在 card div 'col-12 col- 上方进行此更改md-6 pr-2 px-md-3' 和 pl-2 类线也一样....希望对您有所帮助。