如何使用 React 引导程序使内容居中答案

【问题标题】：How to center conent using React bootstrap如何使用 React 引导程序使内容居中
【发布时间】：2021-05-29 09:31:12
【问题描述】：

我正在尝试在垂直和水平方向上进行臭名昭著的中心操作，并且已经成功地做到了。
我正在尝试在我的页面上呈现一个简单的反应组件，该组件将显示 404 消息。我希望这条消息居中。我设法做到这一点的方式是留下一些空白，导致出现垂直滚动条。 Ofc 我可以使用诸如溢出隐藏之类的东西来摆脱它们，但肯定有一种方法可以使用更好的结构或某些引导类来完美地居中此消息。
这是我的组件：

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>
    );
};

最后，我不在乎滚动条是否出现，但让我感到困扰的是，这个位置问题一直以某种形式发生在我身上，我想学会结束这种情况:)

【问题讨论】：

标签： reactjs jsx react-bootstrap centering

【解决方案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 值需要根据导航栏的高度进行调整。

【讨论】：