lorsque j'utilise le haut: 50% et à gauche: 50%css: comment centrer l'élément div de la boîte directement au centre?
la boîte n'est pas directement au centre. bien sûr, lorsque la boîte est très petite, elle semble être centrée. mais quand la boîte est un peu grande, on dirait qu'elle n'est pas centrée.
comment puis-je résoudre ce problème?
top et left correspondent au coin supérieur gauche de votre boîte. Ce que vous essayez de faire, c'est de les faire correspondre au centre. Donc, si vous définissez margin-top et margin-left à un négatif de la moitié de la hauteur et la largeur respectivement, vous obtiendrez une boîte centrée.
exemple pour une boîte 300x200:
width: 300px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -100px;
Vous pouvez attribuer à la boîte une largeur et une hauteur fixes, puis attribuer à ses propriétés margin-top et margin-left la moitié négative de la hauteur et de la largeur.
EDIT: Exemple
div.centered {
width: 500px;
height: 400px;
top: 50%;
left: 50%;
position: absolute;
margin-top: -200px;
margin-left: -250px;
}
De toute évidence, vos valeurs 50% ont encore rester. – Franz
horizontale: Utiliser une largeur fixe et
margin-left: auto;
margin-right: auto;
vertical: Ce n'est pas facile. Vous pouvez utiliser
display: table-cell
pour la DIV environnante, puis donner un
vertical-align: middle
Une façon consiste à attribuer une largeur spécifique à la surface, puis réduire de moitié la distance restante de chaque côté (gauche et droite). Cela peut être plus facile si vous utilisez des pourcentages au lieu de largeurs de pixels, par exemple,
<div style="margin-left:25%; margin-right:25%">...</div>
Cette largeur laisse 50% pour la zone div.
body { text-align: center; }
#box {
width: 500px; /* or whatever your width is */
margin: 10px auto;
text-align: left;
}
ci-dessus centrerait votre boîte centrale horizontalement sur la page avec une marge de 10px en haut et en bas (de toute évidence que la marge supérieure/inférieure peut être modifiée à tout ce que vous voulez). Le 'text-align' sur le corps est nécessaire pour IE, qui, comme d'habitude, ne comprend pas tout à fait autrement. Vous devez ensuite aligner le texte à gauche sur votre boîte (à moins que vous ne vouliez que le texte soit centré) pour contrer le centre d'alignement de texte sur le corps.
Essayer de centrer verticalement est à peu près impossible en utilisant du CSS pur. Bien qu'il y ait un alignement vertical en CSS, cela ne fonctionne pas comme l'alignement vertical HTML dans les tables, donc en CSS 2 il n'y a pas d'alignement vertical intégré comme celui du HTML. Le problème est que vous faites face à une hauteur inconnue - même si vous connaissez la hauteur de votre boîte, la hauteur de la page est inconnue, ou plutôt qu'est-ce que vous essayez de réparer la boîte au centre de? La page? La fenêtre d'affichage? La zone d'écran visible va être différente pour tout le monde, en fonction de la résolution de l'écran, du navigateur, et tous les navigateurs interprètent la hauteur différemment.
Il existe plusieurs méthodes qui prétendent avoir résolu le problème, mais elles ne fonctionnent généralement pas de manière fiable dans tous les navigateurs. J'ai trouvé this one l'autre jour, ce qui ne semble pas mal, mais ça ne marche pas dans Google Chrome (fonctionne sous Firefox et Opera, mais je n'ai pas eu l'occasion de vérifier IE).Il y a une discussion intéressante sur le problème mais sur this thread sur Webmaster World qui résume les différentes méthodes et les avantages et les inconvénients d'entre eux et vaut bien un coup d'oeil.
Editer: La solution de Dav dans la première réponse fonctionne bien tant que vous (ou le visiteur du site) n'augmentez pas la taille de police ou la hauteur de ligne. Le conteneur sera centré, mais dès que la taille de la police est augmentée ou que du contenu est ajouté, le conteneur déborde.
Le "langage" CSS très bizarre ne fournit pas un moyen simple de centrer un élément dans l'écran. Kludges doit être fait! C'est la seule solution que je suis venu aux éléments qui sont AUTO en hauteur et en largeur. Essayé en FF19 (Win + Mac), CH25 (Win + Mac) et IE9.
.overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:#eee; /* aesthetics as you wish */
}
.overlay .vref { /* it is a vertical reference to make vertical-align works */
display:inline-block;
vertical-align:middle; /* this makes the magic */
width:1px;
height:100%;
overflow:hidden;
}
.overlay .message {
display:inline-block;
padding:10px;
border:2px solid #f00; /* aesthetics as you wish */
background-color:#ddd; /* aesthetics as you wish */
vertical-align:middle; /* this makes the magic */
max-width:100%; /* prevent long phrases break the v-alignment */
}
<div class="overlay">
<div class="vref"> </div>
<div class="message">whatever you want goes here</div>
<div class="vref"> </div>
</div>
en utilisant translate va parfaitement y parvenir. il suffit d'appliquer cette
div.centered {
position: fixed; /* or absolute */
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
+1. Bonne réponse! J'ai oublié le top dans le mien. J'ai supprimé ma réponse et j'appuie mon soutien sur le vôtre. – David
Vous ne devez pas ajouter 'position: absolute'? Pas sûr, c'est pourquoi je demande ... – Franz
Franz: Vous devez utiliser une certaine forme de position spécifiée; cependant, cela ne doit pas nécessairement être «absolu» (pourrait également, par exemple, être «fixe» ou «relatif» selon le contexte souhaité). – Amber