web-dev-qa-db-fra.com

CSS: centrer le formulaire horizontalement et verticalement

Comment puis-je centrer le formulaire appelé form_login horizontalement et verticalement dans ma page?

Voici le code HTML que j'utilise actuellement:

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

J'ai essayé de faire le css suivant mais ma forme n'est jamais centrée:

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

Si vous voulez faire un centrage horizontal, il suffit de placer le formulaire dans une balise DIV et d'appliquer l'attribut align = "center" à celle-ci. Ainsi, même si la largeur du formulaire est modifiée, votre centrage restera le même.

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

METTRE &AGRAVE; JOUR

@ G-Cyr a raison. L'attribut align="center" est maintenant obsolète. Vous pouvez utiliser l'attribut text-align pour ceci comme suit.

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

Cela va centrer tout le contenu de la division parent. Une méthode facultative consiste à utiliser l'attribut CSS margin: auto avec des largeurs et des hauteurs prédéfinies. Veuillez suivre le fil suivant pour plus d'informations.

Comment centrer horizontalement un dans un autre?

Le centrage vertical est un peu difficile que cela. Pour ce faire, vous pouvez faire les choses suivantes.

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

vous pouvez utiliser display:flex pour faire ceci: 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 :) */
}

ou 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

si vous utilisez un translateX/Y négatif, la largeur et la hauteur ne sont pas nécessaires et le style est vraiment court

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

Exemple sur codepen: http://codepen.io/anon/pen/ntbFo

Support: http://caniuse.com/transforms3d

6
fcalderan

La réponse acceptée ne fonctionnait pas avec mon formulaire, même lorsque je le réduisais au strict minimum et que je copiais et collais le code. Si quelqu'un d'autre a ce problème, essayez s'il vous plaît ma solution. Fondamentalement, vous définissez Haut et Gauche sur 50% comme dans le PO, mais vous décalez le conteneur du formulaire avec des marges négatives en haut et à gauche égales à 50% de la hauteur et de la largeur de la div, respectivement. Cela déplace le point central des coordonnées Haut et Gauche vers le centre du formulaire. Je soulignerai que la hauteur et la largeur de la forme doivent être spécifiées (non relatives). Dans cet exemple, une forme div de 300x300px avec des marges de -150px en haut et à gauche est parfaitement centrée quelle que soit la taille de la fenêtre:

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

Pour ceux qui se demandent pourquoi j'ai utilisé un conteneur pour le formulaire, c'est parce que j'aime avoir la possibilité de placer d'autres éléments à proximité du formulaire et de les centrer également. Le conteneur de formulaire est totalement inutile dans cet exemple, mais serait certainement utile dans d'autres cas. J'espère que cela t'aides!

5
willehwark

ici marge: 0 auto; signifie que la marge gauche droite sera ajustée en fonction de l'écran, max-width: 500px; pour un appareil plus volumineux, le formulaire utilisera 500 px et un mobile plus petit sera de 200 px, de sorte que le formulaire restera toujours centré sur chaque écran (l’essentiel est que le développement Web évite au maximum la valeur négative)

#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

Je vous suggère d'utiliser bootstrap qui fonctionne parfaitement:

@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