如何在我的页面中水平和垂直居中名为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%;
}
G-C*_*Cyr 46
你可以display:flex这样做:http://codepen.io/anon/pen/yCKuz
html,body {
height:100%;
width:100%;
margin:0;
}
body {
display:flex;
}
form {
margin:auto;/* nice thing of auto margin if display:flex; it center both horizontal and vertical :) */
}
或display:table http://codepen.io/anon/pen/LACnF/
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display:table;
}
body {
display:table-cell;
vertical-align:middle;
}
form {
display:table;/* shrinks to fit content */
margin:auto;
}
A.M*_*ara 23
如果要进行水平居中,只需将表单放在DIV标记内并对其应用align ="center"属性即可.因此,即使更改了表格宽度,您的居中也将保持不变.
<div align="center"><form id="form_login"><!--form content here--></form></div>
UPDATE
@ 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;
}
如果你使用负translateX/Y宽度和高度是不必要的,风格真的很短
#form_login {
left: 50%;
top: 50%;
position: absolute;
-webkit-transform: translate3d(-50%, -50%, 0);
-moz-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
codepen上的示例:http://codepen.io/anon/pen/ntbFo
支持:http://caniuse.com/transforms3d
小智 6
接受的答案不适用于我的表单,即使我将其剥离到最低限度并复制并粘贴代码.如果其他人遇到此问题,请试试我的解决方案.基本上,你将Top和Left设置为50%,但是偏移了窗体的容器,顶部和左边的负边距分别等于div的高度和宽度的50%.这会将Top和Left坐标的中心点移动到窗体的中心.我将强调必须指定表单的高度和宽度(不是相对的).在这个例子中,无论窗口大小如何,顶部和左侧的边距为-150px的300x300px格式div完全居中:
HTML
<body>
<div class="login_div">
<form class="login_form" action="#">
</form>
</div>
</body>
CSS
.login_div {
position: absolute;
width: 300px;
height: 300px;
/* Center form on page horizontally & vertically */
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
}
.login_form {
width: 300px;
height: 300px;
background: gray;
border-radius: 10px;
margin: 0;
padding: 0;
}
现在,对于那些想知道为什么我在表格中使用容器的人来说,这是因为我喜欢选择将其他元素放置在附近的表格中并让它们居中.在此示例中,表单容器是完全不必要的,但在其他情况下肯定会有用.希望这可以帮助!
body {
margin: 0;
padding: 0;
background-color: red;
}
.content {
display: grid;
background-color: bisque;
height: 100vh;
place-items: center;
}<!DOCTYPE html>
<html>
<body>
<div class="content">
<form action="#" method="POST">
<fieldset>
<legend>Information:</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name">
</fieldset>
<button type="button" formmethod="POST" formaction="#">Submit</button>
</form>
</div>
</body>
</html>| 归档时间： |
|
| 查看次数： |
137077 次 |
| 最近记录： |