wake-up-neo.com

CSS: zentrieren Sie das Formular horizontal und vertikal

Wie kann ich das Formular form_login horizontal und vertikal auf meiner Seite zentrieren?

Hier ist der HTML-Code, den ich gerade verwende:

<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>

Ich habe versucht, folgende CSS auszuführen, aber meine Form ist nie zentriert:

#form_login {
    left: 50%;
    top: 50%;
    margin-left: -25%;
    position: absolute;
    margin-top: -25%;
}
18
wawanopoulos

Wenn Sie eine horizontale Zentrierung durchführen möchten, fügen Sie das Formular einfach in ein DIV-Tag ein und wenden Sie das Attribut align = "center" an. Wenn Sie also die Formularbreite ändern, bleibt Ihre Zentrierung gleich.

<div align="center"><form id="form_login"><!--form content here--></form></div>

UPDATE

@ G-Cyr hat recht. Das align="center"-Attribut ist jetzt veraltet. Sie können das text-align-Attribut wie folgt verwenden.

<div css="text-align:center"><form id="form_login"><!--form content here--></form></div>

Dadurch werden alle Inhalte im übergeordneten DIV zentriert. Eine optionale Möglichkeit ist die Verwendung eines margin: auto-CSS-Attributs mit vordefinierten Breiten und Höhen. Bitte folgen Sie dem folgenden Thread für weitere Informationen.

Wie horizontal a in einem anderen zentrieren?

Vertikale Zentrierung ist wenig schwierig. Dazu können Sie Folgendes tun.

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;
}
21
A.M.N.Bandara

sie können display:flex dazu verwenden: 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 :) */
}

oder 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;
}
37
G-Cyr

wenn Sie einen negativen translateX/Y verwenden, sind Breite und Höhe nicht erforderlich und der Stil ist wirklich kurz

#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);
}

Beispiel für Codepen: http://codepen.io/anon/pen/ntbFo

Support: http://caniuse.com/transforms3d

6
fcalderan

Die akzeptierte Antwort funktionierte nicht mit meinem Formular, selbst wenn ich es auf das Nötigste reduzierte und den Code kopierte und einfügte. Wenn jemand anderes dieses Problem hat, versuchen Sie es bitte mit meiner Lösung. Grundsätzlich setzen Sie Top und Left wie das OP auf 50%, versetzen jedoch den Container des Formulars mit negativen Rändern oben und links um 50% der Höhe und Breite des Bereichs. Dadurch wird der Mittelpunkt der oberen und linken Koordinate in die Mitte des Formulars verschoben. Ich möchte betonen, dass die Höhe und Breite der Form muss angegeben werden muss (nicht relativ). In diesem Beispiel ist ein 300x300px-Formendiv mit Rändern von -150px oben und links perfekt zentriert, unabhängig von der Fenstergröße:

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

Für diejenigen, die sich fragen, warum ich einen Container für das Formular verwendet habe, liegt es daran, dass ich die Möglichkeit habe, andere Elemente in der Nähe des Formulars zu platzieren und sie ebenfalls zentriert zu haben. Der Formularcontainer ist in diesem Beispiel völlig überflüssig, wäre aber in anderen Fällen auf jeden Fall nützlich. Hoffe das hilft!

5
willehwark

hier Marge: 0 auto; bedeutet, dass der rechte linke Rand dem Bildschirm entspricht, max. Breite: 500px; Bei größeren Geräten wird das Formular auf 500 Pixel und das kleinere Handy auf 200 Pixel festgelegt, sodass das Formular immer auf jedem Bildschirm in der Mitte bleibt.

#form_login{
    max-width:500px;
    margin: 0px auto;
    top:50%;
    width:200px;
    }
<body>
   <div>
    <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>
   </div>
</body>

    


**
**

0
Harikrishnan k

Ich schlage vor, Sie verwenden Bootstrap, das perfekt funktioniert:

@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>

0
pollux1er

Wie wäre es mit einem Gitter ? Es ist 2019 und die Unterstützung ist angemessen

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>
0
Alex Nolasco