CSS：水平和垂直页面中心表单 [英] CSS : center form in page horizontally and vertically
本文介绍了CSS：水平和垂直页面中心表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
下面是我现在使用的HTML：
$ b 我怎样才能将名为form_login的表单居中放置在我的页面中？$ b
< body>
< form id =form_login>
< p>
< input type =textid =usernameplaceholder =username/>
< / p>
< p>
< input type =passwordid =passwordplaceholder =password/>
< / p>
< p>
< input type =textid =serverplaceholder =server/>
< / p>
< p>
< button id =submitbuttontype =button> Se connecter< / button>
< / p>
< / form>
< / body>
我试过做下面的CSS，但我的表单永远不会居中：
#form_login {
left：50％;
top：50％;
保证金余额：-25％;
位置：绝对;
margin-top：-25％;
解决方案
如果您想要做水平居中，只需将表单放入DIV标记中，并将align =center属性应用于它。因此，即使表格宽度发生变化，您的居中将保持不变。
< div align =center> < form id =form_login><！ - 此处显示内容 - >< / form>< / div>
垂直居中不是那么困难。要做到这一点，您可以做以下事情。
html
<身体GT;
< div id =parent>
< form id =form_login>
<！ - 此处显示内容 - >
< / form>
< / div>
< / body>
Css
#parent {
display：table;
宽度：100％;
}
#form_login {
display：table-cell;
text-align：center;
vertical-align：middle;
}
How can i center the form called form_login horizontally and vertically in my page ?
Here is the HTML I'm using right now:
<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>
I have tried to do the following css but my form is never centered :
#form_login {
left: 50%;
top: 50%;
margin-left: -25%;
position: absolute;
margin-top: -25%;
}
解决方案
If you want to do a horizontal centering, just put the form inside a DIV tag and apply align="center" attribute to it. So even if the form width is changed, your centering will remain the same.
<div align="center"><form id="form_login"><!--form content here--></form></div>
Vertical centering is little difficult than that. To do that, you can do the following stuff.
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;
}
这篇关于CSS：水平和垂直页面中心表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
