如何在引导程序 5 中将 div 居中？ [复制]答案

【问题标题】：How to centre a div in bootstrap 5? [duplicate]如何在引导程序 5 中将 div 居中？ [复制]
【发布时间】：2021-11-13 22:35:06
【问题描述】：

我找不到在 Bootstrap 5 中将 div 居中的直接方法。也许我遗漏了一些明显的东西。谷歌把我带到了flex 文档。在 Bootstrap 4 中，我可以通过设置 col-sm-* 并使用 col-sm-offset-* 来做到这一点

注意：我不想在 div 中居中内容。只需要将整个 div 放在中心（水平）。设置边距是唯一的方法吗？

【问题讨论】：

@cloned 不确定它是否适用于引导程序 5。我只是尝试将 justify-content-center 添加到我想要居中的 div 中，但它没有这样做。我还添加了row 类。 div 刚刚设置了一个 mb：<div class="mb-8"> 我可能错过了明显的
getbootstrap.com/docs/5.1/utilities/flex/#justify-content 这是 BS5 居中的链接。与 BS4 相同。
@cloned 看起来像是将内容居中 在 div 中，而不是 div 本身。 div 仍然水平跨越页面。
你必须为 div 设置一个宽度，否则它将跨越 100%，因为它是一个块元素。您应该检查一下热 flexbox 的工作原理，没有“神奇”的方法可以在 div 上添加一个类以使其居中（只有 div）。您可以将 div 居中在一个 flex-container 中。在我链接的示例中，它们以 3 个 div 为中心，但它也仅适用于 1 个。
@cloned 你是对的 - 谢谢。我注意到offset 只是一个快捷方式，它也将内容放在中心并增加了边距。我发现offset 可以在 bootstrap5 中使用（类命名已更改） - 我会使用它

标签： bootstrap-5

【解决方案1】：

您可以与d-flex align-items-center justify-content-center 一起使用，如下所示：

body{
    height: 100vh;
} 
.container{
    height: 100%;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container d-flex align-items-center justify-content-center">
        <div>
                <h1>You Div</h1>
            </div>
    </div>

【讨论】：