一种方法是使用绝对定位方法，将div的top和left属性设置为50%，然后使用transform属性将div在x轴和y轴上都平移-50%，这样可以使div在页面上水平和垂直居中。

.center-div {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

另一种方法是使用flexbox布局方法，添加一个带有类名的父div，将display属性设置为flex，将align-items和justify-content属性设置为center。

.parent-div {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - footerHeight);
}

可以将min-height属性设置为等于视口高度减去页脚高度的值。
另外，您可以通过给页脚一个固定的位置将其固定在页面的底部，然后可以使用上面的方法使div居中。

footer {
 position: fixed;
 bottom: 0;
 width: 100%;
}

值得注意的是，你的css应该在razor页面的css之后定义，否则razor页面的css可能会优先并隐藏页脚。
还可以使用Bootstrap 4类将div居中并将页脚固定到页面底部。

<div class="d-flex align-items-center justify-content-center min-vh-100">
<!-- your div here -->
</div>
<footer class="fixed-bottom">
<!-- your footer here -->
</footer>

在不同的屏幕大小和设备上测试它也很重要，以确保页脚在任何设备上都没有隐藏。