CSS: Zentrum Formular in der Seite horizontal und vertikal

Wie kann ich das Formular namens form_login horizontal und vertikal in meiner Seite zentrieren?CSS: Zentrum Formular in der Seite horizontal und vertikal

Hier ist der HTML ich jetzt bin mit:

<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 versucht habe, die folgende CSS, aber meine Form ist nie zentriert zu tun:

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

Quelle

2014-03-26 wawanopoulos

Sie brauchen etwas, eine Breite erste –

Wenn Sie eine horizontale Zentrierung durchführen möchten, p Verwenden Sie das Formular in einem DIV-Tag und wenden Sie das Attribut align = "center" darauf an. Auch wenn die Formularbreite geändert wird, bleibt Ihre Zentrierung gleich.

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

Vertikale Zentrierung ist etwas schwierig. Um das zu tun, können Sie folgende Dinge 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; 
}

Quelle

2014-03-26 10:41:47

Perfekt! Vielen Dank ! – wawanopoulos

oh mein Gott, immer noch mit dem Attribut align? –

Yea definitiv werfen, dass in einem Stil ausrichten = "align: center;" tag, ziemlich sicher align wird nicht mehr unterstützt werden. – Joe

Sie display:flex verwenden können, zu tun dies: 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; 
}

Quelle

2014-03-26 10:35:57

Anzeige zu geben: flex; Felsen! –

, wenn Sie eine negative translateX/Y Breite und Höhe verwenden, sind nicht notwendig 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 auf codepen: http://codepen.io/anon/pen/ntbFo

Support: http://caniuse.com/transforms3d

Quelle

2014-03-26 10:40:06 fcalderan

Die akzeptierte Antwort nicht mit meiner Form nicht funktioniert, auch wenn ich es auf das absolute Minimum abgespeckte und kopiert & die geklebt Code. Wenn jemand anderes dieses Problem hat, bitte versuchen Sie es mit meiner Lösung. Grundsätzlich setzen Sie Top und Left auf 50%, wie das OP getan hat, aber den Container des Formulars mit negativen Rändern oben und links gleich 50% der Höhe und Breite des DIV ausgleichen. Dadurch wird der Mittelpunkt der oberen und linken Koordinaten in die Mitte des Formulars verschoben. Ich betone, dass die Höhe und Breite des Formulars angegeben werden müssen (nicht relativ).In diesem Beispiel wird zentrierte die Fenstergröße, egal perfekt eine 300x300px Form div mit Margen von -150px auf der Oberseite und links:

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

Nun, für diejenigen, die sich fragen, warum ich einen Behälter 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 auch zentriert zu haben. Der Formularbehälter ist in diesem Beispiel völlig unnötig, würde aber in anderen Fällen definitiv nützlich sein. Hoffe das hilft!

Quelle

2014-10-13 21:48:08 willehwark

Ich schlage vor, Sie Bootstrap verwenden, die 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> 
 

 
\t <div class="container container-table"> 
 
\t \t <div class="row vertical-center-row"> 
 
\t \t \t <div class="text-center col-md-4 col-md-offset-4" style=""> 
 
\t \t \t \t <form id="login" action="dashboard.html" method="post"> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <div class="username"> 
 
\t \t \t \t \t \t <div class="usernameinner"> 
 
\t \t \t \t \t \t \t <input type="text" name="username" id="username" placeholder="Login" /> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <div class="password"> 
 
\t \t \t \t \t \t <div class="passwordinner"> 
 
\t \t \t \t \t \t \t <input type="password" name="password" id="password" placeholder="Mot de passe" /> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <button id="login-button">Connexion</button> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <div class="keep"><input type="checkbox" /> Gardez moi connecté</div> 
 
\t \t \t \t 
 
\t \t \t \t </form> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</body> 
 
</html>

Quelle

2017-03-01 19:20:05 pollux1er

CSS: Zentrum Formular in der Seite horizontal und vertikal

Antwort

Verwandte Themen