web-dev-qa-db-fra.com

Essayer de centrer div horizontalement et verticalement à l'écran

J'essaie de créer une div pour la page de destination de mon centre de site Web au centre même de l'écran, mais cela ne fonctionne pas. 

Voici mon code

CSS:

.centerDiv{
width:800px;
margin:0 auto;
border-radius: 5px;
background:#111;
padding:10px;}

HTML:

<div id="centerDiv" class="centerDiv">
   <h1>Title</h1>
   <p>Text will go here.</p>
</div>

Merci.

htmlcsscenter
23
user1141887

Note: Si vous essayez de centrer un div horizontalement et verticalement, je vous conseillerais de regarder dans flexbox . Vous aurez toujours besoin de fournir un support de secours, mais flexbox, c'est l'avenir et c'est incroyable.

Mise à jour: tous les navigateurs modernes sont maintenant pris en charge par flexbox.

Vous devez d'abord donner à la div une largeur et une hauteur statiques.

Deuxièmement, vous devez définir position: absolute; et left: 50%; top: 50%;, puis vous devez faire un margin-left et un margin-top qui sont HALF de hauteur et de largeur. Il s'affichera ensuite correctement.

CSS:

.centerDiv{
  width: 800px;
  border-radius: 5px;
  background: #ccc;
  padding: 10px;
  height: 50px;
  position: absolute;
  margin-top: -25px;
  margin-left: -400px;
  top: 50%;
  left: 50%;
}

http://jsfiddle.net/wJ7dY/

P.S. J'ai un peu changé ton style pour que tu puisses lire le texte. J'espère que cela t'aides!

29
Jassi

Ce code ( demo ) permet de définir les variables width et height sans avoir à mettre à jour d’autres propriétés (par exemple, top = height / 2) ni à faire appel à des techniques qui ne sont pas bien prises en charge (par exemple, display:table;. Il manque le support pour les anciennes versions IE combinées à une autre solution pour IE mais vous êtes probablement le meilleur choix.

Le CSS:

.absoluteCenter {
 /* Must manually set width/height */
 width:800px;
 height:500px;

 /* The magic centering code */
 margin:auto;
 position:absolute;
 top:0;bottom:0; /* Aligns Vertically - Remove for Horizontal Only */
 left:0;right:0; /* Aligns Horizontally - Remove for Vertical Only  */

 /* Prevent div from overflowing main window */
 max-width:100%;
 max-height:100%;
 overflow:auto;
}

/* IE 7 and Below */
:first-child+html .absoluteCenter,
* html .absoluteCenter {
 /* Place code here to override all above values, and add IE friendly centering */
}

Et le HTML:

<div class="absoluteCenter">
 Content of DIV
</div>
15
0b10011

Ce que vous cherchez, c'est display:table et display:table-cell. Cette option doit aligner verticalement l'élément #center dans l'élément #parent indépendamment de la hauteur de l'élément #center. Je crois que vous avez besoin d’une hauteur sur l’élément #parent.

HTML

<div id="parent">
<div id="center">
   <h1>Title</h1>
   <p>Text will go here.</p>
</div>
</div>

CSS

#parent{
display: table;
width: /* Your width */;
height: /* Your height */;
}

#center{
position: relative;
display: table-cell;
width: /* Your width */;
height: /* Your height */;
vertical-align: middle;
margin: 0 auto;
}

Je viens de l'utiliser hier, en utilisant display:table sur la body. Cette technique devrait être compatible via IE8.

5
Vian Esterhuizen

Essayez ce qui suit:

 .centerDiv{
     position: absolute;
     top: 50%;
     height: 400px;
     margin-top: -200px; /* Half of the height */
     left: 50%;
     width:800px;
     margin-left: -400px; /* Half of the width */
     border-radius: 5px;
     background:#111;
     padding:10px;
 }
1
MarkSmits

définissez margin sur auto au lieu de 0 auto et vous avez besoin d'une hauteur. Je pense que 100% pour votre but.

0
Sven Bieder