我正在尝试制作一个小的用户名和密码输入框。
我想问一下，你如何垂直对齐一个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;
在 id 为登录的 div 的 CSS 中，但它似乎不起作用。任何帮助，将不胜感激。
现代浏览器中最好的方法是使用 flexbox：
#Login {
display: flex;
align-items: center;
}
一些浏览器需要供应商前缀。对于不支持 flexbox 的旧浏览器（例如 IE 9 和更低版本），您需要使用其中一种旧方法来实现后备解决方案。
推荐阅读
这可以通过 3 行 CSS 来完成，并且兼容（包括）IE9：
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
示例：http: //jsfiddle.net/cas07zq8/
您可以在另一个 div 中垂直对齐一个 div。请参阅JSFiddle 上的此示例或考虑以下示例。
HTML
<div class="outerDiv">
<div class="innerDiv"> My Vertical Div </div>
</div>
CSS
.outerDiv {
display: inline-flex; // <-- This is responsible for vertical alignment
height: 400px;
background-color: red;
color: white;
}
.innerDiv {
margin: auto 5px; // <-- This is responsible for vertical alignment
background-color: green;
}
的.innerDiv边距必须采用以下格式：margin: auto *px;
[*你想要的值在哪里。]
display: inline-flex在支持 HTML5 的最新（更新/当前版本）浏览器中受支持。
它可能无法在 Internet Explorer 中运行 :P :)
始终尝试为任何垂直对齐的 div（即 innerDiv）定义高度以解决兼容性问题。
我参加聚会已经很晚了，但我自己想出了这个，这是我最喜欢的垂直对齐快速技巧之一。这非常简单，而且很容易理解发生了什么。
您使用:beforecss 属性将一个 div 插入到父 div 的开头，给它display:inline-block，vertical-align:middle然后给子 div 相同的属性。由于vertical-align用于沿线对齐，因此那些内联 div 将被视为一条线。
制作:beforediv height:100%，子 div 将自动跟随并对齐在一条非常高的“线”的中间。
.parent:before, .child {
display:inline-block;
vertical-align:middle;
}
.parent:before {
content:""; // so that it shows up
height:100%; // so it takes up the full height
}
这是一个小提琴来证明我在说什么。子 div 可以是任何高度，您永远不必修改它的边距/填充。
这是一个更具解释性的小提琴。
如果你不喜欢:before，你总是可以手动放入一个 div。
<div class="parent">
<div class="before"></div>
<div class="child">
content
</div>
</div>
然后重新分配.parent:before给.parent .before
如果您知道高度，则可以使用带负数的绝对定位，margin-top如下所示：
#Login {
width:400px;
height:400px;
position:absolute;
top:50%;
left:50%;
margin-left:-200px; /* width / -2 */
margin-top:-200px; /* height / -2 */
}
否则，没有真正的方法可以仅使用 CSS 将 div 垂直居中
在我的 Firefox 和 chrome 中工作：
CSS：
display: flex;
justify-content: center; // vertical align
align-items: center; // horizontal align
我发现这个网站很有用：http ://www.vanseodesign.com/css/vertical-centering/ 这对我有用：
HTML
<div id="parent">
<div id="child">Content here</div>
</div>
CSS
#parent {
padding: 5% 0;
}
#child {
padding: 10% 0;
}
@GáborNagy 对另一篇文章的评论是我能找到的最简单的解决方案，并且对我来说就像一个魅力，因为他带来了一个 jsfiddle 我在这里复制它并添加了一点点：
CSS：
#wrapper {
display: table;
height: 150px;
width: 800px;
border: 1px solid red;
}
#cell {
display: table-cell;
vertical-align: middle;
}
HTML：
<div id="wrapper">
<div id="cell">
<div class="content">
Content goes here
</div>
</div>
</div>
如果您还希望将其水平对齐，则必须在“单元格” div 中添加另一个 div“inner-cell”，并为其赋予以下样式：
#inner-cell{
width: 250px;
display: block;
margin: 0 auto;
}
垂直对齐一直很棘手。
在这里，我介绍了一些垂直对齐 div 的方法。
<div style="display:flex;">
<div class="container table">
<div class="tableCell">
<div class="content"><em>Table</em> method</div>
</div>
</div>
<div class="container flex">
<div class="content new"><em>Flex</em> method<br></div>
</div>
<div class="container relative">
<div class="content"><em>Position</em> method</div>
</div>
<div class="container margin">
<div class="content"><em>Margin</em> method</div>
</div>
</div>
em{font-style: normal;font-weight: bold;}
.container {
width:200px;height:200px;background:#ccc;
margin: 5px; text-align: center;
}
.content{
width:100px; height: 100px;background:#37a;margin:auto;color: #fff;
}
.table{display: table;}
.table > div{display: table-cell;height: 100%;width: 100%;vertical-align: middle;}
.flex{display: flex;}
.relative{position: relative;}
.relative > div {position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.margin > div {position:relative; margin-top: 50%;top: -50px;}
除非对齐的 div 具有固定高度，否则请尝试对对齐的 div 使用以下 CSS：
{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: table;
}
我需要指定最小高度
#login
display: flex
align-items: center
justify-content: center
min-height: 16em
如果您使用的是固定高度 div，则可以根据您的设计需要使用 padding-top。或者你可以使用 top:50%。如果我们使用 div 比垂直对齐不起作用，所以我们根据需要使用填充顶部或位置。
将 div 中的子元素居中。它适用于所有屏幕尺寸
#parent {
padding: 5% 0;
}
#child {
padding: 10% 0;
}
<div id="parent">
<div id="child">Content here</div>
</div>
有关更多详细信息，您可以访问此链接
将 div 元素居中的最简单方法是使用具有以下属性的此类。
.light {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
我找到了一种对我很有用的方法。下一个脚本插入一个不可见图像（与 bgcolor 或透明 gif 相同），其高度等于屏幕上空白大小的一半。效果是完美的垂直对齐。
假设您有一个页眉 div (height=100) 和一个页脚 div (height=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>
您将脚本放在要对齐的内容之前！
在我的情况下，我喜欢对齐的内容是宽高比为 100:85（宽度：高度）的图像（宽度 = 95%）。意味着图像的高度是其宽度的 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
}
希望这可以帮助
div 不能以这种方式垂直对齐，但是您可以使用边距或 position:relative 来修改其位置。