Comment positionner un div au milieu de l'écran lorsque la page est plus grande que l'écran ?

Question

Bonjour, j'utilise quelque chose de similaire à ce qui suit pour positionner un div au milieu de l'écran :

<style type="text/css"> 
#mydiv {
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

</style>

<div id="mydiv">Test Div</div>

Cependant, le problème est que cela positionne l'élément au milieu de la page et non de l'écran. Ainsi, si la page a une hauteur de quelques écrans et que je suis en haut de la page (la partie supérieure de la partie est affichée à l'écran), lorsque je fais apparaître la division, elle n'est même pas à l'écran. Vous devez faire défiler la page vers le bas pour la voir.

Quelqu'un peut-il me dire comment le faire apparaître au milieu de l'écran ?

Answer 1

Ajoutez simplement position:fixed et il le gardera en vue même si vous faites défiler vers le bas. voir à http://jsfiddle.net/XEUbc/1/

#mydiv {
    position:fixed;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

Answer 2

Je pense que c'est une solution simple :

<div style="
    display: inline-block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 200px;
    height: 100px;
    margin: auto;
    background-color: #f3f3f3;">Full Center ON Page
</div>

Answer 3

Mettez juste margin:auto;

#mydiv {
    margin:auto;
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

<div id="mydiv">Test Div</div>

Answer 4

Essayez cet exemple, dans cet exemple Div pour être centré exactement au milieu de l'écran, c'est-à-dire centré à la fois verticalement et horizontalement.

CSS

.exactCenter {
    width:200px;
    height:200px;
    position: fixed;
    background-color: #00FF00;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
}

Code source complet...... Positionner un div au milieu de l'écran

Wiliam

Answer 5

Je viens de tester ce code exact sur une page de test et il a centré le div parfaitement sur la page, même avec environ 100 <br /> devant lui pour essayer de le pousser vers le bas.

Essayez peut-être de vérifier le reste de votre code pour voir si vous n'avez pas quelque chose qui écrase les valeurs du DIV ou qui affecte votre DIV pour causer ces problèmes.