web-dev-qa-db-fra.com

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

Je souhaite positionner un élément <div> (ou <table>) au centre de l'écran, quelle que soit sa taille. En d'autres termes, les espaces laissés en haut et en bas doivent être égaux et les espaces laissés à droite et à gauche doivent être égaux. Je voudrais accomplir ceci avec seulement CSS.

J'ai essayé ce qui suit mais cela 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>

Remarque:
Cela est acceptable si l'élément <div> (ou <table>) défile avec le site Web ou non. Je veux juste que ce soit centré lors du chargement de la page. 

javascriptcsshtml
114
Sumit Gupta

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/ .

173
einstein

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/

Mise à jour: Consultez https://css-tricks.com/centering-css-complete-guide/ pour un guide assez exhaustif sur le centrage CSS. En l'ajoutant à cette réponse, il semble attirer beaucoup de regards.

129
XwipeoutX

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;
}

Si vous voulez que les dimensions de l'élément soient flexibles (sans vous soucier des anciens navigateurs), rendez-vous avec la réponse de XwipeoutX .

27
Erik Aigner

Cela fonctionnera pour n'importe quel objet. Même si vous ne connaissez pas la taille:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
14
luminousmen

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>
14
Daniel De León

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;
}
12
elclanrs

Utilisez flex . Beaucoup plus simple et fonctionnera quelle que soit votre taille div:

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

5
Caner

Je ferais cela en CSS:

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

puis en HTML:

<div class="centered"></div>
1
Eduardo Lago Aguilar

Une autre approche simple et flexible permettant d’afficher le bloc au centre: utilisation de l’alignement de texte natif avec line-height et text-align.

Solution:

.parent {
    line-height: 100vh;        
    text-align: center;
}

.child {
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;
}

Et échantillon html:

<div class="parent">
  <div class="child">My center block</div>
</div>

Nous faisons div.parent en plein écran et son enfant unique div.child s'aligne comme texte avec display: inline-block.

Avantages:

  • flexibilité, pas de valeurs absolues
  • support redimensionner
  • fonctionne bien sur mobile

Exemple simple sur JSFiddle: https://jsfiddle.net/k9u6ma8g

0
comm1x

Si quelqu'un cherche une solution,

J'ai trouvé ça,

C'est la meilleure solution que j'ai trouvée jusqu'à présent!

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

http://dabblet.com/Gist/2872671

Espérons que vous apprécierez!

0
Christopher Atwood

essaye ça:

width:360px;
height:360px;
top: 50%; left: 50%;
margin-top: -160px; /* ( ( width / 2 ) * -1 ) */
margin-left: -160px; /* ( ( height / 2 ) * -1 ) */
position:absolute;
0
user3423956