4

我有一个由 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>
4

1 回答 1

4

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

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

jsFiddle在这里

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/

于 2013-10-18T02:42:11.193 回答