如何使用CSS在父元素中垂直居中<div>？
如何使用CSS在父元素中垂直居中<div>？
提问于 2010-04-30 18:56:45
我正在试着做一个小的用户名和密码输入框。
我想问一下，如何垂直对齐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、用户名和表单的div垂直对齐到中心？我试着说：
vertical-align: middle;在CSS中使用id Login的div，但它似乎不起作用。任何帮助都将不胜感激。
回答 14
Stack Overflow用户
发布于 2015-03-24 11:33:52
这可以用3行CSS来完成，并且可以兼容回(包括) IE9：
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}Stack Overflow用户
发布于 2015-08-13 23:56:11
我来得太晚了，但这是我自己想出来的，这是我最喜欢的垂直对齐快速技巧之一。这非常简单，而且很容易理解发生了什么。
您可以使用div css属性在父:before的开头插入一个div，赋予它display:inline-block和vertical-align:middle，然后将这些相同的属性赋给子div。由于vertical-align用于沿直线对齐，因此这些内联div将被视为一条直线。
将:before div设为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
}Here's a fiddle来演示我所说的内容。子div可以是任何高度，您永远不需要修改它的页边距/填充。
和here's a more explanatory fiddle。
如果你不喜欢:before，你可以手动放入一个div。
<div class="parent">
<div class="before"></div>
<div class="child">
content
</div>
</div>然后将.parent:before重新分配给.parent .before
Stack Overflow用户
发布于 2010-04-30 19:00:02
如果你知道高度，你可以对负的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垂直居中
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2743989
复制相关文章
相似问题