如何在 Bootstrap 5 中将 div 居中？

Question

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

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

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