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

134

Je souhaite positionner un <div>(ou un <table>) élément au centre de l'écran quelle que soit la taille de l'écran. En d'autres termes, l'espace laissé en «haut» et «bas» doit être égal et l'espace à gauche sur les côtés «droit» et «gauche» doit être égal. Je voudrais accomplir cela 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:
il n'y a pas de problème si l' <div>élément (ou <table>) défile avec le site Web ou non. Je veux juste qu'il soit centré lorsque la page se charge.

javascript css html

— sumit
source

1

duplicata possible de Comment aligner un <div> au milieu de la page

— Purag

Salut Purmou, la question que vous avez mentionnée si pour le positionnement au milieu de la page, c'est-à-dire espace égal côté gauche et droit - pas l'espace supérieur et inférieur égal!

— sumit

1

duplication possible de Quelle est la meilleure façon de centrer une division verticalement avec CSS

— sortie

duplication possible de Comment centrer un div dans un div - horizontalement?

— bjb568

201

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

Veuillez ne pas utiliser de styles en ligne! Voici un exemple fonctionnel http://jsfiddle.net/S5bKq/ .

— Einstein
source

13

Pour ceux qui recherchent une hauteur dynamique: stackoverflow.com/questions/396145/…

— pulkitsinghal

1

@ woho87 pourquoi ne pas utiliser des styles en ligne? pour les raisons bien connues ou y a-t-il quelque chose de plus que je devrais savoir pour l'exemple spécifique?

— Sharky

@KatrinRaimond c'est pour les raisons bien connues, documentées ici stackoverflow.com/questions/2612483/… et ici webdesign.about.com/od/css/a/aa073106.htm .

— Alex

Mais, définir le haut du divElement dans l'unité '%' fait que le divElement occupe un espace vertical à moins que divElement ne soit placé à l'intérieur d'un élément relatif.

— sudip

est la position: fixe ou la position: absolue?

— Kurkula

151

Les transformations étant de plus en plus prises en charge de nos jours, vous pouvez le faire sans connaître la largeur / hauteur de la fenêtre contextuelle.

.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. L'ajout à cette réponse car il semble avoir beaucoup de globes oculaires.

— XwipeoutX
source

1

Si le contenu de la fenêtre contextuelle utilise overflow:auto, le défilement est foiré dans IE9. :(

— joescii

2

Pas si ubiquos. IE8 conserve 20% de la part du navigateur et ne le prend pas en charge . Alors ne prenez celui-ci que pour IE9 +.

— fotanus

7

+1 pour être la seule solution où vous n'avez pas à spécifier la hauteur et la largeur ou à utiliser Javascript.

— Jan Derk

@fotanus lorsque les développeurs cesseront de prendre en charge IE 9 <les utilisateurs migreront ou mettront à jour leur navigateur.

— Diego Vieira

@DIegoVieira ce n'est malheureusement pas ainsi que les choses fonctionnent. Voyez la tragédie des communs . Les gens continueront donc à soutenir IE8 parce qu'ils ne veulent pas perdre cette part, et les gens continueront à l'utiliser parce que cela fonctionne.

— fotanus

33

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 des éléments soient flexibles (et que vous ne vous souciez pas des anciens navigateurs), optez pour la réponse de XwipeoutX .

— Erik Aigner
source

1

C'est la réponse la plus claire et la plus simple et est également compatible avec les appareils mobiles . +1

— Rust

22

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

— lumineux
source

17

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>

— Daniel De León
source

12

Si vous avez une position fixe divjuste absolue, celle-ci à 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;
}

— elclans
source

9

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

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

Développer l'extrait

— Caner
source

3

Je ferais cela en CSS:

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

puis en HTML:

<div class="centered"></div>

— Eduardo Lago Aguilar
source

0

essaye ça

<table style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%;">
 <tr>
  <td>
   <div style="text-align: left; display: inline-block;">
    Your Html code Here
   </div>
  </td>
 </tr>
</table>

Ou ca

<div style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%; display: table">
 <div style="display: table-row">
  <div style="display: table-cell; vertical-align:middle;">
   <div style="text-align: left; display: inline-block;">
    Your Html code here
   </div>
  </div>
 </div>
</div>

— Dali
source

0

S'il y a quelqu'un qui cherche une solution,

J'ai trouvé ça,

C'est la meilleure solution que j'ai trouvée!

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!

— Christopher Atwood
source

0

Une autre approche flexible et simple pour afficher le bloc au centre: utiliser l'alignement de texte natif avec line-heightet 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 le div.parentplein écran, et son unique enfant div.childs'aligne en tant que texte avec display: inline-block.

Avantages:

flexibilité, pas de valeurs absolues
prendre en charge le redimensionnement
fonctionne bien sur mobile

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

— Pavel Shorokhov
source

0

Solution alternative qui n'utilise pas la position absolue:
je vois beaucoup de réponses absolues de position. Je ne pourrais pas utiliser la position absolue sans casser autre chose. Donc, pour ceux qui ne le pourraient pas aussi, voici ce que j'ai fait:
https://stackoverflow.com/a/58622840/6546317 (posté en réponse à une autre question).

La solution se concentre uniquement sur le centrage vertical car mes éléments enfants étaient déjà centrés horizontalement, mais la même chose pourrait être appliquée si vous ne pouviez pas les centrer horizontalement d'une autre manière.

— reddtoric
source

-2

essaye ça:

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

— user3423956
source

2

C'est effectivement la même chose que la réponse acceptée

— apaul

oui, mais ici j'explique le fonctionnement de la marge en haut et à gauche ... quelqu'un ne le sait pas ....

— user3423956

1

Ensuite, c'est effectivement la même chose que la deuxième réponse

— apaul