Verticalement centrer une div dans le corps?

J'ai essayé de le centre de cette verticalement dans body (non pas à l'horizontale). Aussi, je ne veux pas de spécifier les hauteurs ou quelque chose comme ça. J'ai essayé d'ajouter une enveloppe avec un 100% de la hauteur et d'autres choses, mais suis nulle part. Pouvez-vous svp m'aider à 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>​
quand il s'agit de heighs la rapide réponse est toujours: "vous ne pouvez pas". Les pages Html sont destinés à être défile verticalement et hauteurs devrait être libre de le modifier en fonction du contenu. Donc il n'y a pas de bonne façon au centre de vos div verticalement avec le css et le html. allthought il peut y avoir un peu de javascript/jQuery solutions de contournement si vous êtes désireux d'apprendre que.
Il n'y a aucun débordement sur le site..alors, pourquoi n'est-il pas un moyen d'aligner verticalement un div?
Qu'en l'enveloppant dans un tableau et à l'aide de l'attribut valign? '<td valign="top|middle|bottom|base"> " il y a aussi plus d'informations ici que vous pourriez trouver utiles. phrogz.net/css/vertical-align/index.html
Double Possible de stackoverflow.com/questions/59309/...
voici un jQuery violon exemple : jsfiddle.net/23NUC/3

OriginalL'auteur Hunter Mitchell | 2012-10-07

  1. 48

    Voir cette version modifiée de votre jsFiddle.

    Fondamentalement, juste envelopper de votre contenu dans <div class = "main"><div class = "wrapper"></div></div>, et ajouter le code CSS suivant:

    html, body {
    height: 100%;
}
.main {
    height: 100%;
    width: 100%;
    display: table;
}
.wrapper {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}
    pourquoi dois-je avoir un principal, papier d'emballage, puis mon objet...de plus, mon corps a 100% de la hauteur de l'image de fond, et la hauteur de l'attribut rend débordement.
    Le débordement est à venir à partir de padding ou margins, les supprimer par la mise en margin: 0; padding: 0; ou ajouter un CSS Normaliser de votre page d'éviter de futurs problèmes. Les deux wrappers sont nécessaires pour le centrage; je crains que c'est la seule voie à suivre si vous ne voulez pas utiliser de JavaScript.

    OriginalL'auteur Chris

  2. 0

    Un JSFiddle exemple avec le tableau de la courbure

    Dans la solution ci-dessus, Fournir css pour html & corps avec "height: 100%", puis les envelopper la forme que pour être centré autour d'une table.

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

    C'est très non-sémantique.
    cela n'a pas l'air centré pensé... pourquoi vous postez un violon qui se complique pas faire ce qui était demandé?
    désolé.. oublié de mettre à jour le JSFiddle... ont mis à jour la jsfiddle.net/23NUC/4

    OriginalL'auteur bhatanant2

  3. 0

    cela a fonctionné pour moi:

    Style.css

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

    J'ai trouvé ce bout de code ici.

    OriginalL'auteur SeppeDek