如何在我的页面中水平和垂直居中名为form_login的表单？
这是我现在使用的HTML：
<body>
<form id="form_login">
<p>
<input type="text" id="username" placeholder="username" />
</p>
<p>
<input type="password" id="password" placeholder="password" />
</p>
<p>
<input type="text" id="server" placeholder="server" />
</p>
<p>
<button id="submitbutton" type="button">Se connecter</button>
</p>
</form>
</body>
我尝试过以下css,但我的表单从不居中：
#form_login {
left: 50%;
top: 50%;
margin-left: -25%;
position: absolute;
margin-top: -25%;
}
解决方法
如果要进行水平居中,只需将表单放在DIV标记内并对其应用align =“center”属性即可.因此,即使更改了表单宽度,您的居中也将保持不变.
<div align="center"><form id="form_login"><!--form content here--></form></div>
UPDATE
@ G-Cyr是对的. align =“center”属性现已过时.您可以使用text-align属性,如下所示.
<div css="text-align:center"><form id="form_login"><!--form content here--></form></div>
这将使父DIV中的所有内容居中.可选方法是使用margin：自动CSS属性,具有预定义的宽度和高度.请按照以下主题获取更多信息.
How to horizontally center a in another ?
垂直定心比这困难.为此,您可以执行以下操作.
HTML
<body>
<div id="parent">
<form id="form_login">
<!--form content here-->
</form>
</div>
</body>
CSS
#parent {
display: table;
width: 100%;
}
#form_login {
display: table-cell;
text-align: center;
vertical-align: middle;
}
