Html CSS : 在页面中水平和垂直居中表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22658141/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS : center form in page horizontally and vertically
提问by wawanopoulos
How can i center the form called form_login horizontally and vertically in my page ?
如何在我的页面中水平和垂直居中名为 form_login 的表单？
Here is the HTML I'm using right now:
这是我现在使用的 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>
I have tried to do the following css but my form is never centered :
我曾尝试执行以下 css，但我的表单从未居中：
#form_login {
left: 50%;
top: 50%;
margin-left: -25%;
position: absolute;
margin-top: -25%;
}
回答by G-Cyrillus
you can use display:flexto do this : http://codepen.io/anon/pen/yCKuz
你可以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 :) */
}
or display:tablehttp://codepen.io/anon/pen/LACnF/
或display:tablehttp://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;
}
回答by A.M.N.Bandara
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" 属性。因此，即使表单宽度发生变化，您的居中也将保持不变。
<div align="center"><form id="form_login"><!--form content here--></form></div>
UPDATE
更新
@G-Cyr is right. align="center"attribute is now obsolete. You can use text-alignattribute for this as following.
@G-Cyr 是对的。align="center"属性现在已过时。您可以text-align为此使用属性，如下所示。
<div style="text-align:center"><form id="form_login"><!--form content here--></form></div>
This will center all the content inside the parent DIV. An optional way is to use margin: autoCSS attribute with predefined widths and heights. Please follow the following thread for more information.
这将使父 DIV 中的所有内容居中。一种可选的方法是使用margin: auto具有预定义宽度和高度的 CSS 属性。请关注以下主题以获取更多信息。
How to horizontally center a in another ?
Vertical centering is little difficult than that. To do that, you can do the following stuff.
垂直居中比这更难。为此，您可以执行以下操作。
html
html
<body>
<div id="parent">
<form id="form_login">
<!--form content here-->
</form>
</div>
</body>
Css
css
#parent {
display: table;
width: 100%;
}
#form_login {
display: table-cell;
text-align: center;
vertical-align: middle;
}
回答by Fabrizio Calderan
if you use a negative translateX/Ywidth and height are not necessary and the style is really short
如果你使用负的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);
}
Example on codepen: http://codepen.io/anon/pen/ntbFo
codepen 示例：http://codepen.io/anon/pen/ntbFo
Support: http://caniuse.com/transforms3d
回答by willehwark
The accepted answer didn't work with my form, even when I stripped it down to the bare minimum and copied & pasted the code. If anyone else is having this problem, please give my solution a try. Basically, you set Top and Left to 50% as the OP did, but offset the form's container with negative margins on the top and left equal to 50% of the div's height and width, respectively. This moves the center point of the Top and Left coordinates to the center of the form. I will stress that the height and width of the form mustbe specified (not relative). In this example, a 300x300px form div with margins of -150px on the top and left is perfectly centered no matter the window size:
接受的答案不适用于我的表单，即使我将其精简到最低限度并复制并粘贴代码。如果其他人遇到此问题，请尝试我的解决方案。基本上，您像 OP 一样将 Top 和 Left 设置为 50%，但是用负边距在顶部和左侧偏移窗体的容器，分别等于 div 高度和宽度的 50%。这会将 Top 和 Left 坐标的中心点移动到窗体的中心。我将强调必须指定表单的高度和宽度（不是相对的）。在此示例中，无论窗口大小如何，顶部和左侧边距为 -150px 的 300x300px 表单 div 都完美居中：
HTML
HTML
<body>
<div class="login_div">
<form class="login_form" action="#">
</form>
</div>
</body>
CSS
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;
}
Now, for those wondering why I used a container for the form, it's because I like to have the option of placing other elements in the form's vicinity and having them centered as well. The form container is completely unnecessary in this example, but would definitely be useful in other cases. Hope this helps!
现在，对于那些想知道为什么我在表单中使用容器的人来说，这是因为我喜欢将其他元素放置在表单附近并让它们居中的选项。在这个例子中，表单容器是完全没有必要的，但在其他情况下肯定会有用。希望这可以帮助！
回答by pollux1er
I suggest you using bootstrap which works perfectly:
我建议您使用完美运行的引导程序：
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
html, body, .container-table {
height: 100%;
}
.container-table {
display: table;
}
.vertical-center-row {
display: table-cell;
vertical-align: middle;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login Page | ... </title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
</head>
<body>
<div class="container container-table">
<div class="row vertical-center-row">
<div class="text-center col-md-4 col-md-offset-4" style="">
<form id="login" action="dashboard.html" method="post">
<div class="username">
<div class="usernameinner">
<input type="text" name="username" id="username" placeholder="Login" />
</div>
</div>
<div class="password">
<div class="passwordinner">
<input type="password" name="password" id="password" placeholder="Mot de passe" />
</div>
</div>
<button id="login-button">Connexion</button>
<div class="keep"><input type="checkbox" /> Gardez moi connecté</div>
</form>
</div>
</div>
</div>
</body>
</html>回答by Alex Nolasco
How about using a grid? it's 2019 and support is reasonable
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>