如何在我的頁(yè)面中將名為form_login的表單水平和垂直居中？
這是我現(xiàn)在使用的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，但是我的表單從來(lái)沒(méi)有居中:
#form_login {
left: 50%;
top: 50%;
margin-left: -25%;
position: absolute;
margin-top: -25%;
}現(xiàn)在，網(wǎng)格得到了廣泛的支持，如果表格單獨(dú)出現(xiàn)在正文中，代碼可以被縮短。
html {
min-height: 100%;/* fill the screen height to allow vertical alignement */
display: grid; /* display:flex works too since body is the only grid cell */
}
body {
margin: auto;
}<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>如果您想進(jìn)行水平居中，只需將表單放入DIV標(biāo)簽中，并對(duì)其應(yīng)用align="center "屬性。因此，即使窗體寬度發(fā)生變化，您的居中位置也會(huì)保持不變。
<div align="center"><form id="form_login"><!--form content here--></form></div>更新
@G-Cyr是對(duì)的。align="center "屬性現(xiàn)已過(guò)時(shí)。您可以使用text-align屬性，如下所示。
<div style="text-align:center"><form id="form_login"><!--form content here--></form></div>這將使父DIV中的所有內(nèi)容居中。一種可選的方法是使用具有預(yù)定義寬度和高度的margin: auto CSS屬性。請(qǐng)遵循以下線程獲取更多信息。
如何使一個(gè)在另一個(gè)中水平居中？
垂直居中比這稍微難一點(diǎn)。要做到這一點(diǎn)，你可以做以下事情。
超文本標(biāo)記語(yǔ)言
<body>
<div id="parent">
<form id="form_login">
<!--form content here-->
</form>
</div>
</body>鋼性鑄鐵
#parent {
display: table;
width: 100%;
}
#form_login {
display: table-cell;
text-align: center;
vertical-align: middle;
}如果你使用一個(gè)負(fù)的translateX/Y，那么寬度和高度都是不必要的，而且樣式很短
#form_login {
left : 50%;
top : 50%;
position : absolute;
transform : translate(-50%, -50%);
}<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>公認(rèn)的答案對(duì)我的表格不起作用，即使我把它精簡(jiǎn)到最低限度并復(fù)制& amp粘貼代碼。如果其他人有這個(gè)問(wèn)題，請(qǐng)嘗試我的解決方案。基本上，您像op一樣將Top和Left設(shè)置為50%,但是在頂部和左側(cè)使用負(fù)邊距偏移表單的容器，分別等于div高度和寬度的50%。這會(huì)將左上坐標(biāo)的中心點(diǎn)移動(dòng)到表單的中心。我要強(qiáng)調(diào)的是，表單的高度和寬度必須是指定的(不是相對(duì)的)。在本例中，一個(gè)300x300px的窗體div，頂部和左側(cè)的邊距為-150px，無(wú)論窗口大小如何，都完全居中:
超文本標(biāo)記語(yǔ)言
<body>
<div class="login_div">
<form class="login_form" action="#">
</form>
</div>
</body>半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)
.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;
}JSFiddle
現(xiàn)在，對(duì)于那些想知道為什么我在表單中使用容器的人來(lái)說(shuō)，這是因?yàn)槲蚁矚g在表單的附近放置其他元素，并且讓它們居中。在這個(gè)例子中，表單容器是完全不必要的，但是在其他情況下肯定有用。希望這有所幫助！
用網(wǎng)格怎么樣？現(xiàn)在是2019年，支持是合理的
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>我建議您使用運(yùn)行良好的bootstrap:
@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>#form_login {
height:500px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}<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>