Comment centrer un élément “position: absolu”

J’ai un problème de centrage d’un élément dont la position atsortingbut est définie sur absolute . Est-ce que quelqu’un sait pourquoi les images ne sont pas centrées?

 body { text-align: center; } #slideshowWrapper { margin-top: 50px; text-align: center; } ul#slideshow { list-style: none; position: relative; margin: auto; } ul#slideshow li { position: absolute; } ul#slideshow li img { border: 1px solid #ccc; padding: 4px; height: 450px; } 
  
  • Dummy 1
  • Dummy 2

 position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; 

Sans connaître la width / height de l’élément 1 positionné, il est toujours possible de l’aligner comme suit:

EXEMPLE ICI

 .child { position: absolute; top: 50%; /* position the top edge of the element at the middle of the parent */ left: 50%; /* position the left edge of the element at the middle of the parent */ transform: translate(-50%, -50%); /* This is a shorthand of translateX(-50%) and translateY(-50%) */ } 

Il est à noter que CSS Transform est pris en charge dans IE9 et les versions ultérieures . (Préfixes du fournisseur omis pour des raisons de concision)


Explication

Ajouter top / left de 50% déplace le bord supérieur / gauche de l’élément au milieu du parent et la fonction translate() avec la valeur (négative) de -50% déplace l’élément de la moitié de sa taille. L’élément sera donc positionné au milieu.

En effet, une valeur de pourcentage sur top propriétés top / left est relative à la hauteur / largeur de l’élément parent (qui crée un bloc conteneur).

Bien qu’une valeur de pourcentage sur la fonction de translate() soit relative à la largeur / hauteur de l’élément lui-même (en fait, il fait référence à la taille du cadre de sélection ) .

Pour un alignement unidirectionnel, translateY(-50%) plutôt pour translateX(-50%) ou translateY(-50%) .


1. Un élément avec une position autre que static . Ie relative , absolute , valeurs fixed .

Centrer quelque chose d’ absolute positionné est plutôt compliqué en CSS.

 ulhttps://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element/#slideshow li { position: absolute; left:50%; margin-left:-20px; } 

Modifiez la margin-left à (négative) la moitié de la largeur de l’élément que vous essayez de centrer.

Centre aligné verticalement et horizontalement

 top: 0; bottom: 0; margin: auto; position: absolute; left: 0; right: 0; 

Remarque: Les éléments doivent avoir la largeur et la hauteur à définir

Un simple truc CSS, ajoutez simplement:

 width: 100%; text-align: center; 

Cela fonctionne à la fois sur les images et le texte.

Si vous voulez centrer un élément absolu

 https://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element/#div { position:absolute; top:0; bottom:0; left:0; right:0; width:300px; /* Assign a value */ height:500px; /* Assign a value */ margin:auto; } 

Si vous voulez qu’un conteneur soit centré de gauche à droite, mais pas de haut en bas

 https://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element/#div { position:absolute; left:0; right:0; width:300px; /* Assign a value */ height:500px; /* Assign a value */ margin:auto; } 

Si vous voulez qu’un conteneur soit centré de haut en bas, qu’il soit de gauche à droite

 https://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element/#div { position:absolute; top:0; bottom:0; width:300px; /* Assign a value */ height:500px; /* Assign a value */ margin:auto; } 

Mise à jour du 15 décembre 2015

Eh bien, j’ai appris cela un autre nouveau tour il y a quelques mois. En supposant que vous avez un élément parent relatif.

Ici va votre élément absolu.

 .absolute-element { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:50%; /* You can specify ANY width values here */ } 

Avec cela, je pense que c’est une meilleure réponse que mon ancienne solution. Puisque vous n’avez pas besoin de spécifier la largeur ET la hauteur. Celui-ci adapte le contenu de l’élément lui-même.

pour centrer une position: atsortingbut absolu que vous devez définir à gauche: 50% et margin-left: -50% de la largeur du div.

    
should be centered horizontaly

pour le centre absolu absolu, vous devez faire la même chose avec le bouton gauche et le haut. (REMARQUE: html et body doivent avoir une hauteur minimale de 100%)

    
should be centered verticaly

et peut être combiné pour les deux

     
should be centered

Cela a fonctionné pour moi:

 position: absolute; left: 50%; transform: translateX(-50%); 
  
content

voir la démo sur: http://jsfiddle.net/MohammadDayeh/HrZLC/

text-align: center ; fonctionne avec un élément position: absolute lors de l’ajout à left: 0; right: 0; left: 0; right: 0;

Le plus simple, le meilleur:

 img { top: 0; bottom: 0; left: 0; right: 0; margin: auto auto; position: absolute; } 

Ensuite, vous devez insérer votre balise img dans une balise dont la position est la suivante: propriété relative, comme suit:

 

Si vous ne connaissez pas la largeur de l’élément, vous pouvez utiliser ce code:

  
I am some centered shrink-to-fit content!
tum te tum

Démo au violon: http://jsfiddle.net/wrh7a21r/

Source: https://stackoverflow.com/a/1777282/1136132

entrer la description de l'image ici

Je ne suis pas sûr de ce que vous voulez accomplir, mais dans ce cas, il suffit d’append la width: 100%; à votre ulhttps://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element/#slideshow li fera l’affaire.

Explication

Les balises img sont des éléments de bloc en ligne. Cela signifie qu’ils circulent en ligne comme du texte, mais qu’ils ont également la largeur et la hauteur comme des éléments de bloc. Dans votre css il y a deux text-align: center; Les règles appliquées au et au https://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element/#slideshowWrapper (qui est redondant) https://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element/#slideshowWrapper tous les éléments enfants inline et inline-block dans leurs éléments les plus proches. Dans votre code, ce sont des balises li . Tous les éléments de bloc ont une width: 100% s’ils sont le stream statique ( position: static; ), ce qui est la valeur par défaut. Le problème est que lorsque vous dites aux balises li d’être position: absolute; , vous les retirez du stream statique normal, ce qui les amène à réduire leur taille pour correspondre à leur contenu interne, c’est-à-dire qu’ils perdent leur width: 100% propriété à width: 100% .

À left: calc(50% - Wpx/2); où W est la largeur de l’élément fonctionne pour moi.

Centrer un élément «position: absolu».

ajoutez ces

 left: 0%; right: 0%; text-align: center; 

ou ceux-ci

 left: 0%; right: 0%; margin: 0 auto; 

élément : position absolue

 .element { position: absolute; } 

élément centré

 .element { position: absolute; left: 0%; right: 0%; text-align: center; // or this -> margin: 0 auto; } 

Un object absolu à l’intérieur d’un object relatif est relatif à son parent, le problème est que vous avez besoin d’une largeur statique pour le conteneur https://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element/#slideshowWrapper , et le rest de la solution est comme le disent les autres utilisateurs

 body { text-align: center; } https://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element/#slideshowWrapper { margin-top: 50px; text-align:center; width: 500px; } ulhttps://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element/#slideshow { list-style: none; position: relative; margin: auto; } ulhttps://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element/#slideshow li { position: relative; left: 50%; } ulhttps://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element/#slideshow li img { border: 1px solid https://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element/#ccc; padding: 4px; height: 450px; } 

http://jsfiddle.net/ejRTU/10/

Voici la solution la plus simple et la plus simple pour un élément central avec «position: absolute»

  body,html{ min-height:100%; } div.center{ width:200px; left:50%; margin-left:-100px;/*this is 50% value for width of the element*/ position:absolute; background:https://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element/#ddd; border:1px solid https://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element/#999; height:100px; text-align:center } 
   
should be centered verticaly

Vos images ne sont pas centrées car vos éléments de liste ne sont pas centrés; seul leur texte est centré. Vous pouvez réaliser le positionnement souhaité en centrant la liste entière ou en centrant les images dans la liste.

Une version révisée de votre code peut être trouvée en bas. Dans ma révision, je centre la liste et les images qu’elle contient.

La vérité est que vous ne pouvez pas centrer un élément dont la position est absolue.

Mais ce comportement peut être imité!

Note: Ces instructions fonctionneront avec n’importe quel élément de bloc DOM, pas seulement img.

  1. Entourez votre image avec une balise div ou autre (dans votre cas, un li).

     
    my-image

    Note: Les noms donnés à ces éléments ne sont pas spéciaux.

  2. Modifiez votre css ou scss pour donner au div le positionnement absolu et centrer votre image.

     .absolute-div { position: absolute; width: 100%; // Range to be centered over. // If this element's parent is the body then 100% = the window's width // Note: You can apply additional top/bottom and left/right atsortingbutes // ie - top: 200px; left: 200px; // Test for desired positioning. } .absolute-div img { width: 500px; // Note: Setting a width is crucial for margin: auto to work. margin: 0 auto; } 

Et voila! Votre img devrait être centré!

Votre code:

Essayez ceci:

 body { text-align : center; } https://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element/#slideshow { list-style : none; width : 800px; // alter to taste margin : 50px auto 0; } https://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element/#slideshow li { position : absolute; } https://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element/#slideshow img { border : 1px solid https://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element/#CCC; padding : 4px; height : 500px; width : auto; // This sets the width relative to your set height. // Setting a width is required for the margin auto atsortingbute below. margin : 0 auto; } 
 
  • Dummy 1
  • Dummy 2

La position absolue le retire du stream et le place à 0x0 sur le parent (dernier élément de bloc pour avoir une position absolue ou relative).

Je ne suis pas sûr de savoir exactement ce que vous essayez d’accomplir. Il serait peut-être préférable de mettre le li en position:relative et qui va les centrer. Compte tenu de votre CSS actuel

Découvrez http://jsfiddle.net/rtgibbons/ejRTU/ pour jouer avec

 https://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element/#parent { position : relative; height: 0; overflow: hidden; padding-bottom: 56.25% /* images with aspect ratio: 16:9 */ } img { height: auto!important; width: auto!important; min-height: 100%; min-width: 100%; position: absolute; display: block; /* */ top: -9999px; bottom: -9999px; left: -9999px; right: -9999px; margin: auto; } 

Je ne me souviens plus où j’ai vu la méthode de centrage mentionnée ci-dessus, en utilisant les valeurs négatives en haut, à droite, en bas et à gauche. Pour moi, cette technique est la meilleure dans la plupart des situations.

Lorsque j’utilise la combinaison ci-dessus, l’image se comporte comme une image d’arrière-plan avec les parameters suivants:

 background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; 

Plus de détails sur le premier exemple peuvent être trouvés ici:
Maintenir le ratio d’aspect d’un div avec CSS

Vous pouvez essayer de cette façon:

 * { margin: 0px; padding: 0px; } https://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element/#body { height: 100vh; width: 100vw; position: relative; text-align: center; background-image: url('https://s-media-cache-ak0.pinimg.com/originals/96/2d/ff/962dff2247ad680c542622e20f44a645.jpg'); background-size: cover; background-repeat: no-repeat; } .text { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height:100px; display: inline-block; margin: auto; z-index: 999999; } 
   

Random

Ce qui semble se produire, c’est qu’il existe deux solutions; centré en utilisant les marges et centré en utilisant la position. Les deux fonctionnent bien, mais si vous souhaitez positionner un élément par rapport à cet élément centré, vous devez utiliser la méthode de la position absolue, car la position absolue du second élément est par défaut le premier parent positionné. Ainsi:

  

width: 300 px; margin: 0 auto

Absolute

width:300px; position: absolute; left: 50%; margin-left:-150px;

Absolute

Jusqu’à ce que je lise cette publication, en utilisant la technique automatique margin: 0, pour créer un menu à gauche de mon contenu, je devais créer une colonne de même largeur à droite pour la compenser. Pas beau. Merci!

Utilisez la margin-left: x%; où x est la moitié de la largeur de l’élément.

 html, body, ul, li, img { box-sizing: border-box; margin: 0px; padding: 0px; } https://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element/#slideshowWrapper { width: 25rem; height: auto; position: relative; margin-top: 50px; border: 3px solid black; } ul { list-style: none; border: 3px solid blue; } li { /* center horizontal */ position: relative; left: 0; top: 50%; width: 100%; text-align: center; font-size: 18px; /* center horizontal */ border: 3px solid red; } img { border: 1px solid https://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element/#ccc; padding: 4px; //width: 200px; height: 100px; } 
  
  • Dummy 1
  • Dummy 2
  • Dummy 3