如何垂直居中divs？
我试图做一个小的用户名和密码input框。
我想问，如何垂直alignment一个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与ID用户名和表格垂直自己到中心？ 我试着把：
vertical-align: middle;
在与IDlogin的div的CSS，但它似乎并没有工作。 任何帮助，将不胜感激。
现代浏览器中最好的方法是使用flexbox：
#Login { display: flex; align-items: center; }
某些浏览器需要供应商前缀。 对于没有支持flexbox的旧浏览器（例如IE 9及更低版本），您需要使用其中一种较旧的方法实施回退解决scheme。
推荐阅读
- 浏览器支持
- Flexbox指南
- 使用CSS灵活框
您可以垂直alignment另一个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 🙂
总是尝试为任何垂直alignment的div（即innerDiv）定义高度来解决兼容性问题。
这可以通过3行CSS来完成，并兼容（并且包括）IE9：
.element { position: relative; top: 50%; transform: translateY(-50%); }
例如： http : //jsfiddle.net/cas07zq8/
信用
如果你知道这个高度，你可以使用绝对定位和一个负的margin-top如下所示：
#Login { width:400px; height:400px; position:absolute; top:50%; left:50%; margin-left:-200px; /* width / -2 */ margin-top:-200px; /* height / -2 */ }
否则，没有真正的方法来垂直居中一个div只有CSS
我很晚了，但我自己想出了这个，这是我最喜欢的垂直alignment方式之一。 这很简单，很容易理解发生了什么。
你可以使用:before css属性在父div的开头插入一个div，给它display:inline-block和vertical-align:middle ，然后把这些属性赋予子div。 由于vertical-align是为了沿线alignment，所以这些内联div将被视为一条线。
使:before div height:100% :before height:100% ，并且子div将自动跟随和alignment在一个非常高的“线”中间。
.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 ，你总是可以手动input一个div。
<div class="parent"> <div class="before"></div> <div class="child"> content </div> </div>
然后只是重新分配.parent:before .parent .before
我发现这个网站很有用： 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对另一篇文章的评论是我能find的最简单的解决scheme，对我来说就像一个魅力，因为他带来了一个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>
如果你希望水平alignment，则必须在“单元格”div中添加另一个div“inner-cell”，并赋予它以下风格：
#inner-cell{ width: 250px; display: block; margin: 0 auto; }
垂直alignment一直是棘手的。
这里我已经介绍了一些垂直alignmentdiv的方法。
HTML：
<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>
CSS：
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;}
除非alignment的div具有固定的高度，请尝试使用以下CSS到alignment的div：
{ margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: table; }
在我的Firefox和铬的工作：
CSS：
display: flex; justify-content: center; // vertical align align-items: center; // horizontal align
如果您使用的是固定高度的div，则可以根据您的devise需要使用padding-top。 或者你可以使用top：50％。 如果我们使用div比垂直alignment不起作用，所以我们根据需要使用填充顶部或位置。
我发现了一种对我很好的方法。 下一个脚本将插入一个不可见的图像（与bgcolor或者transparant gif相同），高度等于屏幕上空白大小的一半。 效果是一个完美的垂直alignment。
假设你有一个标题div（height = 100）和一个页脚div（height = 50），你想alignment的主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>
将脚本放置在要alignment的内容之前！
在我的情况下，我喜欢alignment的内容是宽高比为100：85（宽：高）的图像（宽度= 95％）。图像的高度是其宽度的85％。 宽度是屏幕宽度的95％。
我因此使用：
var content = 150 + ( 0.85 * ( 0.95 * window.innerWidth ));
结合这个脚本
<body onResize="window.location.href = window.location.href;">
而且你有一个平滑的垂直alignment。
希望这也适合你！
我需要指定最小高度
#login display: flex align-items: center justify-content: center min-height: 16em
你有试过这个吗？
.parentdiv { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: 300px; // at least you have to specify height }
希望这可以帮助
div不能以这种方式垂直alignment，但可以使用边距或位置：相对于修改其位置。
