HTML垂直对齐失败？

【问题标题】：HTML Vertical-align failed?HTML垂直对齐失败？
【发布时间】：2013-10-26 18:23:55
【问题描述】：

我有一个包含 2 个文本框的简单表单。我只是想让表单出现在页面中间。页面中没有任何额外的元素。通过使用align="center"，元素确实会移动到中心，但vertical-align:middle 的情况并非如此？

<html>
<body style="vertical-align: middle;">

<form>
<div align="center" style="vertical-align: middle;">
<h1>blabla</h1>
<label>
<span>Username: </span><input id="userName" type="text" name="userName" />
</label><br/>

<label>
<span>Password: &nbsp;</span><input id="passWord" type="password" name="passWord" />
</label><br/>
<input type="button" value="Login" />
</label>

</div>
</form>

</body>
</html>

【问题讨论】：

请参阅this answer 和this site 了解您的问题的答案。

标签： html css

【解决方案1】：

使用以下 CSS，它将内容垂直和水平居中。

您需要将html/body 设置为height:100%，然后将主体或父级设置为display:table。之后，将孩子设置为display:table-cell 和vertical-align:middle。这将负责垂直对齐。要水平居中，请使用margin:0px auto;，并在表单上设置宽度。

jsFiddle here

html, body {
    height:100%;
    width:100%;
    margin:0px;
}
body {
    display:table;
    vertical-align:middle;
}
form {
    display:table-cell;
    vertical-align:middle;
    width:240px;
    margin:0px auto;
}

这里是全屏结果：http://jsfiddle.net/Sjk6m/embedded/result/

【讨论】：

请注意，表格和表格单元格显示属性在 IE 中不起作用
@j08691 什么是 IE8 ;) ?
这是雷德蒙迪安，用来蒸一堆 shiznit。