CSS: центральная форма на странице по горизонтали и вертикали
Как я могу центрировать форму, называемую 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%;
}
Ответы
Ответ 1
Если вы хотите выполнить горизонтальное центрирование, просто поместите форму внутри тега 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;
}
Ответ 2
вы можете использовать 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;
}
Ответ 3
если вы используете отрицательный 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
Ответ 4
Принятый ответ не работал с моей формой, даже когда я сократил ее до минимума, скопировал и вставил код. Если у кого-то еще возникла эта проблема, пожалуйста, попробуйте мое решение. По сути, вы устанавливаете Top и Left на 50%, как OP, но смещаете контейнер формы с отрицательными полями в верхней и левой частях, равными 50% высоты и ширины div, соответственно. Это перемещает центральную точку верхних и левых координат в центр формы. Подчеркну, что высота и ширина формы должны быть указаны (не относительные). В этом примере, div формы 300x300px с полями -150px сверху и слева идеально центрируется независимо от размера окна:
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;
}
JSFiddle
Теперь для тех, кто интересуется, почему я использовал контейнер для формы, потому что мне нравится иметь возможность размещать другие элементы в окрестности формы и центрировать их. Контейнер формы в этом примере совершенно не нужен, но определенно будет полезен в других случаях. Надеюсь это поможет!
Ответ 5
Я предлагаю вам использовать 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>
Ответ 6
Как насчет использования сетки? это 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>
