web-dev-qa-db-fra.com

Div horizontalement au centre et verticalement au milieu

Je veux aligner un div horizontalement au centre et verticalement au milieu du body d'une page.

Le css:

.loginBody {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #999; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */
}
.loginDiv {
    position: absolute;
    left: 35%;
    top: 35%;
    text-align: center;        
    background-image: url('Images/loginBox.png');
    width:546px;
    height:265px;
}

Et j'ai ce html:

<body class="loginBody">
    <form id="form1">
    <div class="loginDiv">

    </div>
    </form>
</body>

Maintenant, il se comporte comme je le veux, mais si je redimensionne le navigateur, il est devenu complètement déformé, peut-être à cause du positionnement absolu. Je montre quelques captures d'écran: dans Firefox redimensionné: enter image description here

en chrome redimensionné: enter image description here

en redimensionné c'est à dire: enter image description here

en fenêtre maximisée c'est: enter image description here

Existe-t-il un moyen de résoudre ce problème et de réaliser cet alignement centré en utilisant le positionnement relatif?

Merci.

Éditer:

Dans Firefox, aucune barre de défilement n'apparaît lors du redimensionnement mais elle apparaît dans d'autres navigateurs. enter image description here

htmlcssvertical-alignmentalignment
17
Tapas Bose

Essaye ça:

.loginDiv {
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;        
    background-image: url('Images/loginBox.png');
    width:546px;
    height:265px;
    margin-left: -273px; /*half width*/
    margin-top: -132px; /*half height*/
}

Vous le déplacez vers le centre, puis vers l'arrière à gauche et vers le haut de la moitié des dimensions - cela le centrera même lors du redimensionnement

19
StilgarBF

Faites un div qui est pour le contenu de la page et faites une classe "content" avec le css suivant. Cela a fonctionné pour moi sur Jquery Mobile avec Phonegap pour les appareils Android. J'espère que cela aide quelqu'un.

CSS

.content {
    width: 100%;
    height: 100%;
    top: 25%;
    left: 25%;
    right: 25%;
    text-align: center;
    position: fixed;
}
7
Josh Valdivieso
#div {
    height: 200px;
    width: 100px;
    position:absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -50px;
}

Il s'agit d'une méthode courante pour centrer un div. Vous le positionnez absolument, puis vous le déplacez à mi-chemin et à mi-chemin. Ajustez ensuite la position avec des marges de la moitié des dimensions du div que vous positionnez.

Pour référence (ceci utilise un positionnement fixe mais pour garder le div en place même lors du défilement, utile lors des popups modaux .. http://css-tricks.com/quick-css-trick-how-to-center -un-objet-exactement-au-centre /

3
Greg