使用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%);
}

Answer 2

垂直对齐，一种极好的喜好。

实现这一目标的一种方法是在组件周围设置另一个div。在您的示例中，这将是具有类container的{​​{1}}的孩子。为此，您需要添加col-md-6 col-md-offset-3样式。对于您的实际组件div，然后添加以下样式

height: 100vh

为了获得正确的＆＃34;您可能需要进行一些调整。对齐您的上下文，但这应该这样做。