web-dev-qa-db-fra.com

Centrer verticalement une div dans le corps?

J'ai essayé de centrer ceci verticalement dans body (pas horizontalement). De plus, je ne veux pas spécifier de hauteur ou quoi que ce soit du genre. J'ai essayé d'ajouter un emballage avec une hauteur de 100% et d'autres choses, mais je n'ai rien obtenu. Pouvez-vous m'aider s'il vous plaît résoudre ce problème?

jsFiddle Ici

 <form name="signup" class="signup" action="signup.php" style="border: 1px solid #000; ">
     <input type="text" placeholder="Email"/><br>
     <input type="text" placeholder="Username"/><br>
     <input type="password" placeholder="Password"/><br>
     <button type="submit">Next</button>
 </form>​
htmlcsscentering
17
Hunter Mitchell

Voir cette version modifiée de votre jsFiddle .

Fondamentalement, enveloppez simplement votre contenu dans <div class = "main"><div class = "wrapper"></div></div> et ajoutez le CSS suivant:

html, body {
    height: 100%;
}
.main {
    height: 100%;
    width: 100%;
    display: table;
}
.wrapper {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}
48
Chris

Mise à jour: jsFiddle

form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); /* IE 9 */
    -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */	    
}
<form name="signup" class="signup" action="signup.php" style="border: 1px solid #000; ">
     <input type="text" placeholder="Email"/><br>
     <input type="text" placeholder="Username"/><br>
     <input type="password" placeholder="Password"/><br>
     <button type="submit">Next</button>
 </form>​

Connexes: Centrer une div dans le corps

6
antelove

Si vous avez une flexbox disponible, vous pouvez le faire sans utiliser display: table;

Exemple de code:

html,
body {
  height: 100%;
  width: 100%;
}

.container {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}
<html>
  <body>
    <div class="container">
      <div class="content">
        This div will be centered
      </div>
    </div>
  </body>
</html>

Ta-da! Contenu centré verticalement et horizontalement div. JSFiddle: https://jsfiddle.net/z0g0htm5/ .

Tiré principalement de https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ et https://css-tricks.com/snippets/css/a-guide- to-flexbox/

5
Rob Waring

cela a fonctionné pour moi:

Style.css

div {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

J'ai trouvé cet extrait de code ici .

1
SeppeDek

A JSFiddle exemple avec table warp

Dans la solution ci-dessus, fournissez css pour html & body avec "height: 100%", puis enveloppez le formulaire à centrer autour d'un tableau.

Échantillon de code 

<html>
<body>    
<table height="100%" width="100%" border="1">
    <tr>
    <td>
    <form name="signup" class="signup" action="signup.php" style="border: 1px solid #000; ">

                <input type="text" placeholder="Email"/><br>

                <input type="text" placeholder="Username"/><br>

                <input type="password" placeholder="Password"/><br>

                <button type="submit">Next</button>

            </form>
        </td>
        </tr>
</table>    
</body>
</html>

Le plus grand centre commercial

0
bhatanant2