如何使用React bootstrap居中内容

Question

我正试图做垂直和水平的臭名昭著的中心操作，并且已经成功地这样做了。
我想在我的页面上呈现一个简单的react组件，它将显示404消息。我想把这条信息放在中间。我设法做到这一点的方式，一些空白是剩余的，导致垂直滚动条显示。我可以使用溢出隐藏之类的东西来摆脱它们，但肯定有一种方法可以完美地将此信息集中，只需使用更好的结构或某些引导类。
我的组件:

const NotFoundPage = () => {
return (
<div>
<NavbarComp />
<div className="d-flex align-items-center justify-content-center text-center min-vh-100">
<div>
<h3 className="m-4">
<Badge variant="primary">404</Badge> Page not found...
</h3>
<Link to="/">
<Button variant="secondary">Go to main page</Button>
</Link>
</div>
</div>
</div>
);
};

最后，我并不关心滚动条是否出现但是这个位置问题总是以某种形式出现在我身上，这让我很困扰我想学会结束它:)

Answer 1

你已经知道如何居中你的"未找到";消息。让你困惑的是Navbar，你可以把它拿出来测试。你会注意到滚动条消失了。

这个类min-vh-100给导航条下面的伸缩框的高度100%的视口，这避免了添加任何滚动条。问题是导航条会把自己贴在页面顶部，使页面失去平衡。所以滚动量正好是Navbar的高度，因为它是空的，所以滚动量很少。

一个直观的解决方案是将导航条放在伸缩框内。但这在你的情况下不起作用，因为你的伸缩盒是如何调整物品的。所以我将给你一个更简单的解决方案，它应该被看作是一个变通的方法。

Bootstrap没有附带min-vh-95或min-vh-80之类的类，但幸运的是，它们非常容易创建。您可以将这个类添加到您的自定义CSS:

.not-found-container {
min-height: 95vh !important;
}

(或者你可以按照命名惯例命名为min-vh-95，例如)然后从

更改伸缩框类

<div className="d-flex align-items-center justify-content-center text-center min-vh-100">

<div className="d-flex align-items-center justify-content-center text-center not-found-container">

下面是一个沙盒来说明这个想法:https://codesandbox.io/s/peaceful-sanne-e3m9w?file=/src/App.js

显然min-height的值需要根据导航条的高度来调整