如何在我的页面中水平和垂直居中放置名为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>
更新
@ G-Cyr是正确的。align="center"现在该属性已过时。您可以如下使用text-align属性。
<div style="text-align:center"><form id="form_login"><!--form content here--></form></div>
这会将所有内容置于父DIV内部。一种可选方式是使用margin: auto具有预定义宽度和高度的CSS属性。请按照以下主题获取更多信息。
垂直居中几乎没有困难。为此，您可以执行以下操作。
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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句