如何使用Bootstrap 4将div内容置于屏幕中心

Question

我正在使用Bootstrap 4，我想集中容器内容，这意味着它正好显示在屏幕的中心。但是，即使高度为100％，我的内容仍然位于顶部，我使用Add a banner Ad to your app

图片：

justify-content-center align-items-center

Answer 1

你甚至不需要引导程序。

您可以将position: relative用于父级div，将position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);用于子级，然后子级将位于父级中间。但请记住将父高度和宽度设置为正确的值。

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

有关css centering here

的更多信息

如果您坚持使用bootstrap，则需要指定父div的高度以使垂直居中工作。