css - 使用 CSS 垂直对齐 Bootstrap 面板

Question

我看过这里的许多文章，它们似乎为大多数人提供了解决方法，显然我除外。

我在我的 website 上使用了以下 CSS :

/* login page background */

body.function-login {
display:inline-block;
float:none;
vertical-align:middle;
height:100%;
background:transparent url("http://sheqcomply.com/loginbackground.jpg") no-repeat center center fixed;
background-size:contain;
}

无论我尝试什么，我都无法让登录框在页面内垂直对齐。如果需要，我可以提供布局 css 和页面 html，但由于它们很大，所以没有将其包含在这篇文章中。

当前代码的结果是

提前致谢

Answer 1

这是我在必须垂直对齐时经常使用的方法，我将元素定位在距顶部 50% 的位置，然后将其平移到 -50%。它应该也适合你，但它也取决于你那里的其他 css 指令。

.function-login {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}