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>