我想制作一个小的用户名和密码输入框。
我想问一下，如何垂直对齐一个div？
我现在有的代码是：
<div id="Login" class="BlackStrip floatright">
<div id="Username" class="floatleft">Username<br>Password</div>
<div id="Form" class="floatleft">
<form action="" method="post">
<input type="text" border="0"><br>
<input type="password" border="0">
</form>
</div>
</div>
如何将ID为"Username"和"Form"的div垂直居中对齐？我已经尝试过以下代码：
vertical-align: middle;
我在CSS中针对id为Login的div做了一些样式设置，但似乎没有生效。希望能得到帮助。
{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: table;
}
div的位置使用img标签可以正常工作。 - user将 div 元素居中的最简单方法是使用以下属性的类。
.light {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
#parent {
background-color: red;
height: 160px;
display: flex;
/*vertical-align */
align-items: center;
/*horizontal align*/
justify-content: center;
}
#child {
background-color: orange;
height: 20px;
padding: 10px;
}<div id="parent">
<div id="child">Content here</div>
</div>我找到了一种对我非常有效的方法。下一个脚本插入了一个不可见的图像（与bgcolor或透明gif相同），高度等于屏幕上空白空间的一半。效果是完美的垂直对齐。
假设您有一个标题div（高度=100）和一个页脚div（高度=50），并且您想要对齐的主div中的内容具有300的高度：
<script type="text/javascript" charset="utf-8">
var screen = window.innerHeight;
var content = 150 + 300;
var imgheight = ( screen - content) / 2 ;
document.write("<img src='empty.jpg' height='" + imgheight + "'>");
</script>
将脚本放置在您想对齐的内容之前！
在我的情况下，我想要对齐的内容是一张图片（宽度为95％），其长宽比为100：85（宽度：高度）。这意味着图像的高度是其宽度的85％。而宽度则为屏幕宽度的95％。
因此，我使用了以下代码：
var content = 150 + ( 0.85 * ( 0.95 * window.innerWidth ));
将此脚本与其他脚本结合使用
<body onResize="window.location.href = window.location.href;">
并且您可以拥有平滑的垂直对齐。
希望这对您也有效！
你试过这个吗？
.parentdiv {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
height: 300px; // at least you have to specify height
}