我已经尝试了一些解决方法，例如使高度为100%。但我想知道语义 ui-反应是否提供了任何替代方案。
您引用的 SUI 示例使用了一些自定义样式来实现此工作。您可以在 <head> 标记中看到这些内联样式。
body {
background-color: #DADADA;
}
body > .grid {
height: 100%;
}
.image {
margin-top: -100px;
}
.column {
max-width: 450px;
}
Semantic UI React在"布局"下也实现了所有完全相同的布局。您可以在此处查看您引用的登录示例。该布局的来源可以在此处查看。源代码中的注释指出了 CSS 中的一些细节，除了简单地像这样设置Grid组件之外，还需要这样做：
<Grid
textAlign='center'
style={{ height: '100%' }}
verticalAlign='middle'
>
您还需要将父容器的高度设置为 100%。任何时候您尝试利用窗口的视口高度时都是如此。<body>之前的所有父容器都必须定义其高度：
<style>
body > div,
body > div > div,
body > div > div > div.login-form {
height: 100%;
}
</style>
显然，对于您的项目，您不希望像示例那样在页面上的组件中间抛出这样的样式标记。