Positionnement <div> élément au centre de l'écran

Question

Positionnement <div> élément au centre de l'écran

Demandé el 25 de Mars, 2012: Quand la question a-t-elle été
102821 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je veux de la position d'un <div> (ou <table>) de l'élément au centre de l'écran, indépendamment de la taille de l'écran. En d'autres termes, l'espace à gauche sur "haut" et " bas "doit être égale et de l'espace à gauche sur la "droite" et "gauche" côtés doit être égal. J'aimerais réaliser cela avec uniquement du CSS.

J'ai essayé ce qui suit, mais ça ne fonctionne pas:

 <body>
  <div style="top:0px; border:1px solid red;">
    <table border="1" align="center">
     <tr height="100%">
      <td height="100%" width="100%" valign="middle" align="center">
        We are launching soon!
      </td>
     </tr>
    </table>
  </div>
 </body>

Note:
Il est de toute façon très bien si l' <div> (ou <table>) des rouleaux de papier avec le site ou pas. Juste envie d'être centré lorsque le chargement de la page.

Demandé el 25 de Mars, 2012 par iSumitG

Answer 1

5 Réponses

Answer 2

243voto

einstein Points 2571

Le moyen le plus simple, si vous avez une largeur et une hauteur fixes:

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

S'il vous plaît ne pas utiliser les styles inline! Voici un exemple de travail http://jsfiddle.net/S5bKq/ .

Répondu el 25 de Mars, 2012 par einstein (2571 Points )

Answer 3

197voto

XwipeoutX Points 624

Les transformations étant de plus en plus supportées de nos jours, vous pouvez le faire sans connaître la largeur / hauteur du popup

 .popup {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Facile! JSFiddle ici: http://jsfiddle.net/LgSZV/

Répondu el 9 de Mars, 2014 par XwipeoutX (624 Points )

Answer 4

40voto

Erik Aigner Points 7182

Réglez la largeur et la hauteur et vous êtes bon.

 div {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 200px;
}

Répondu el 9 de Juillet, 2013 par Erik Aigner (7182 Points )

Answer 5

27voto

Daniel De León Points 2842

Maintenant, c'est plus facile avec HTML 5 et CSS 3:

 <!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body > div {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                display: flex;
                justify-content: space-around;
                align-items: center;
                flex-wrap: wrap;
            }
        </style>
    </head>
    <body>
        <div>
            <div>TODO write content</div>
        </div>
    </body>
</html>

Répondu el 21 de Août, 2014 par Daniel De León (2842 Points )

Answer 6

13voto

elclanrs Points 40467

Si vous avez un div fixe, positionnez-le simplement à 50% du haut et 50% à gauche et à la marge négative en haut et à gauche de la moitié de la hauteur et de la largeur, respectivement. Adaptez-vous à vos besoins:

 div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 300px;
    margin-left: -250px;
    margin-top: -150px;
}

Répondu el 25 de Mars, 2012 par elclanrs (40467 Points )

Positionnement <div> élément au centre de l'écran

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Positionnement <div> élément au centre de l'écran

Réponses

Questions connexes

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: