Comment puis-je centrer verticalement et horizontalement un DIV?

Question

Le comportement de mon image de fond est que l'image est toujours parfaitement centrée lorsque je redimensionne la fenêtre du navigateur. Il arrive en haut, à gauche, à droite et en bas la même "distance" au bord de la fenêtre de mon navigateur.

Le CSS:

background-image: url("ipad.jpg"); 
background-position: 50% 50%; 
background-repeat: no-repeat; 
background-size: 563.5px 800px; 

J'ai un div superposant cette image et je voudrais à se comporter de la même manière comme l'image d'arrière-plan, de sorte qu'il est toujours centré au-dessus de l'image d'arrière-plan dans le même endroit.

Est-ce encore possible? Et si oui. Comment? J'espère que vous comprenez ce que je veux accomplir. :) Merci beaucoup pour votre aide. : D

Answer 1

Il semble que vous essayez de centrer le contenu horizontalement et verticalement, quelle que soit la taille de la fenêtre du navigateur. Si oui, essayez quelque chose comme ceci:

Votre HTML:

<div class="outer"> 
    <div class="middle"> 
     <div class="inner"> 
      The content that you want centered. 
     </div> 
    </div> 
</div> 

Votre CSS:

/* Vertical and horizontal centering */ 
.outer { 
    position:fixed; 
    top:0; left:0; 
    width:100%; height:100%; 
} 
.middle { 
    height:100%; 
    display:table; 
    margin:0 auto; 
} 
.inner { 
    vertical-align:middle; 
    display:table-cell; 
} 

Bonne chance!

Edit: Voici un exemple de ce qui précède - http://jsbin.com/aguciw