Div horizontalement centre et verticalement milieu

Je veux aligner un div horizontalement centre et verticalement milieu de la body d'une page.Div horizontalement centre et verticalement milieu

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 remets à la côte le navigateur, il est devenu complètement déformée, peut-être c'est parce que le positionnement absolu. Je montre quelques-unes des captures d'écran: dans Firefox redimensionnée: enter image description here

en chrome redimensionnée: enter image description here

en redimensionnée à savoir: enter image description here

dans la fenêtre maximisée il est: enter image description here

Est-il possible de résoudre ce problème et d'obtenir cet alignement centré en utilisant un positionnement relatif?

Merci.

Edit:

Dans Firefox ne semble scrollbar lors du redimensionnement, mais il apparaît dans d'autres navigateurs. enter image description here

Source

2012-03-11 Tapas Bose

Essayez ceci:

.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 vous déplacez au centre, et que l'arrière gauche et par la moitié des dimensions - qui va centrer même sur redimensionne

Source

2012-03-11 15:47:22 StilgarBF

Merci pour l'aide. il travaille actuellement, mais un problème dans Firefox th Il n'y a pas de barre de défilement lors du redimensionnement mais elle est présente dans d'autres navigateurs. J'ai mis à jour ma question. S'il vous plaît regardez-le. –

si vous ne voulez pas de barres de défilement - il suffit d'ajouter 'overflow: hidden' au corps – StilgarBF

non je veux barre de défilement, donc je définis 'overflow: auto' dans le corps, mais il n'y a toujours pas de barre de défilement comme représenté. –

#div { 
    height: 200px; 
    width: 100px; 
    position:absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -100px; 
    margin-left: -50px; 
}

C'est une méthode commune pour centrer un div. Vous le positionnez absolument, puis déplacez-le à 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 (celui-ci utilise le positionnement fixe que pour maintenir la div en place même lors du défilement, utile lorsque vous faites popups modales .. http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

Source

2012-03-11 15:47:29 Greg

Merci pour votre aide. il fonctionne maintenant mais un problème dans firefox il n'y a pas de barre de défilement lors du redimensionnement mais il est présent dans d'autres navigateurs. J'ai mis à jour ma question. S'il vous plaît regardez-le. –

http://jsfiddle.net/mAVd6/2/ est-ce que cela reflète essentiellement comment votre page est construite? Est-ce qu'il produit des barres de défilement dans Firefox? d'autres navigateurs? - Si vous échangez absolu avec fixe ce qui arrive aux barres de défilement ?! – Greg

Si je change la position en absolu à fixe, aucune barre de défilement n'apparaît dans les navigateurs. –

Faire une div qui est du contenu de la page et faire un " contenu » classe avec le code CSS suivant. Cela a fonctionné pour moi sur Jquery mobile avec PhoneGap pour les appareils Android. Espérons que cela aide quelqu'un.

CSS

.content { 

     width: 100%; 
     height: 100%; 
     top: 25%; 
     left: 25% 
     right: 25%; 
     text-align: center; 
     position: fixed; 
}

Source

2012-08-07 17:49:06

Div horizontalement centre et verticalement milieu

Répondre

Questions connexes