680

J'ai un problème pour centrer un élément dont l'attribut est positiondéfini 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;
}

<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="img/dummy1.JPG" alt="Dummy 1" /></li>
      <li><img src="img/piano_unlicened.JPG" alt="Dummy 2" /></li>
    </ul>
  </div>
</body>

Développer l'extrait

html css css-position centering user1098278
la source

3

vous devez donner à ul # slideshow une largeur fixe ...

ptriek

1195

Si vous avez défini une largeur, vous pouvez utiliser:

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;

baaroz
la source

21

C'est une réponse beaucoup plus propre que les autres! Y a-t-il des mises en garde?

sbichenko

8

Réponse la plus intelligente. Je viens de le vérifier et cela fonctionne sur tous les navigateurs. Cela ne fonctionne pas sur IE8 mais cela fonctionne sur IE> = 9

Roger

13

Assurez-vous de tester dans IE, cette astuce ne fonctionne pas si l'élément a une «largeur maximale» définie dans IE9

aphax

33

Personnellement, je préfère la syntaxe "margin: 0 auto; left: 0; right: 0;"

Hector Ordonez

58

Cela ne fonctionne tout simplement pas, sauf si une largeur est définie. Il pourrait APPARAÎTRE de fonctionner si vous avez text-align: centrez sur le parent et n'avez pas d'arrière-plan sur l'élément en position absolue, mais placez un arrière-plan dessus et vous verrez qu'il prend réellement toute la largeur. La réponse translateX (-50%) est la bonne.

Codemonkey

587

Sans connaître le width/ heightde l' élément ¹ 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 convient de noter que CSS Transform est pris en charge dans IE9 et supérieur . (Les préfixes du fournisseur ont été omis par souci de concision)

Explication

L'ajout top/ leftde 50%déplace le bord supérieur / gauche de l'élément au milieu du parent et translate()fonctionne avec la valeur (négative) de -50%déplace l'élément de la moitié de sa taille. Par conséquent, l'élément sera positionné au milieu.

En effet, un pourcentage sur top/left properties est relative à la hauteur / largeur de l'élément parent (qui crée un bloc conteneur).

Alors qu'une valeur de pourcentage sur la fonction de transformation est 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 ) .translate()

Pour un alignement unidirectionnel, allez avec translateX(-50%)ou à la translateY(-50%)place.

^{1. Un élément avec un positionautre que static. -À- dire relative, absolute, les fixedvaleurs.}

Hashem Qolami
la source

65

Cela devrait être la meilleure réponse !!

Chris Pine

3

Fantastique! Le meilleur du lot!

Bhargav Ponnapalli

4

J'ai cherché partout une réponse à cela et une bonne explication. C'est la meilleure réponse et une excellente explication! Merci.

Mike

5

Centrage horizontal: position: absolute; left: 50%; transform: translateX(-50%);, centrage vertical: position: absolute; top: 50%; transform: translateY(-50%);.

Константин Ван

1

Tout à l'heure, j'ai trouvé cette translatepropriété, traduire l'élément par la taille de lui - même , peu importe la taille de son parent.

Farzin Kanzi

185

Centrer quelque chose de bien absolutepositionné est plutôt compliqué en CSS.

ul#slideshow li {
    position: absolute;
    left:50%;
    margin-left:-20px;

}

Passez margin-leftà (négatif) la moitié de la largeur de l'élément que vous essayez de centrer.

bibliothèque
la source

5

Lorsque vous testez cela, cela ne fonctionne pas lorsque les images sont de tailles différentes et qu'elles s'empilent toujours les unes sur les autres

Ryan Gibbons

3

Trop de hack-ish (comme cela se révèle presque toujours avec css). Mais génial! :-)

Dr.Kameleon

1

J'ai été tenté par l'intelligence de certaines autres réponses, mais seule celle-ci était fiable pour moi.

Chris Schiffhauer

J'ai eu le même problème que Ryan, j'ai donc essayé la deuxième réponse suggérée par "baaroz" et ça a marché pour moi !!! et il prend également en charge différentes résolutions, car ma DIV principale a une largeur en% et non PX

UID

Ce n'est pas vraiment centré. Ceci est plus positionné à droite

Artsicle

82

Div centre verticalement et horizontalement aligné

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

Remarque: les éléments doivent avoir une largeur et une hauteur à définir

Sebin Simon
la source

1

Je ne sais pas pourquoi cela n'est pas plus voté. Fonctionne dans tous les navigateurs, y compris les navigateurs mobiles pour autant que je sache. Coutures plus fiables en termes de maintien. C'est simple, facile et propre ...

David Martins

1

C'est une meilleure réponse. Il ne nécessite qu'une div pour faire et a plus de cas d'utilisation que d'appeler à gauche: 50% ;, en haut: 50%; comme la solution avec 69+ votes

Ian S

la meilleure réponse à ce jour, toute personne venant ici devrait la vérifier!

Abdo Adel du

3

L'élément a également besoin d'un heightensemble pour que cela fonctionne.

alexbooots

55

Une astuce CSS simple, ajoutez simplement:

width: 100%;
text-align: center;

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

cutez7boyz
la source

48

Si vous souhaitez centrer un élément absolu

#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 souhaitez qu'un conteneur soit centré de gauche à droite, mais pas de haut en bas

#div {
    position:absolute;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

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

#div {
    position:absolute;
    top:0;
    bottom:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

Mise à jour au 15 décembre 2015

Eh bien, j'ai appris cette autre nouvelle astuce il y a quelques mois. En supposant que vous avez un élément parent relatif.

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

Wesley Brian Lachenal
la source

36

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

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

Vadamadafaka
la source

32

Cela a fonctionné pour moi:

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

Épuiser
la source

27

pour centrer une position: attribut absolu que vous devez définir à gauche: 50% et marge à gauche: -50% de la largeur de la div.

<!-- for horizontal -->
<style>
div.center{
 width:200px;
 left:50%;
 margin-left:-100px;
 position:absolute;
}
</style>


<body>
 <div class='center'>
  should be centered horizontaly
 </div>
</body>

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

<!-- for vertical -->
<style>
 body,html{
  min-height:100%;
 }
 div.center{
  height:200px;
  top:50%;
  margin-top:-100px;
  position:absolute;
 }
</style>

<body>
 <div class='center'>
  should be centered verticaly
 </div>
</body>

et peut être combiné pour les deux

   <!-- for both -->
 <style>
 body,html{
  min-height:100%;
 }
 div.center{
  width:200px;
  height:50px
  left:50%;
  top:50%;
  margin-left:-100px;
  margin-top:-25px;
  position:absolute;
 }
</style>


<body>
 <div class='center'>
  should be centered
 </div>
</body>

Rednas
la source

16

    <div class="centered_content"> content </div>
    <style type="text/css">
    .centered_content {
       text-align: center;
       position: absolute;
       left: 0;
       right: 0;
    }
    </style>

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

text-align: center; fonctionne avec un position: absoluteélément lors de l'ajoutleft: 0; right: 0;

Mohammad Dayeh
la source

2

Veuillez fournir une sorte de commentaire ou de justification pour expliquer pourquoi ce code fonctionne. Les réponses de code elles-mêmes seront inévitablement marquées pour suppression.

rayryeng

14

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 qui arbore la position: propriété relative, comme suit:

<div style="width:256px; height: 256px; position:relative;">
      <img src="photo.jpg"/>
</div>

Stéphane de Luca
la source

8

probablement le plus court

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

Cris
la source

1

C'est assez génial, mais juste pour centrer verticalement et horizontalement, nous devons faire la marge automatique uniquement

Santosh

7

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

<body>
<div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
        I am some centered shrink-to-fit content! <br />
        tum te tum
    </div>
</div>

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

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

joseantgv
la source

@ NabiK.AZ cet exemple est utile si vous ne connaissez pas la largeur de l'élément. Dans votre exemple, vous définissez une largeur au div.

joseantgv

7

Ou vous pouvez maintenant utiliser une boîte flexible avec une position absolue:

.parent {
    position: relative;
    display: flex;
    justify-content: center;
}

.child {
    position: absolute;
}

Sebastian Thomas
la source

c'est tellement sous-estimé.

Siege21x

5

Je ne suis pas sûr de ce que vous voulez accomplir, mais dans ce cas, ajouter simplement width: 100%;à votreul#slideshow li volonté fera l'affaire.

Explication

Les imgbalises sont des éléments de bloc en ligne. Cela signifie qu'ils coulent en ligne comme du texte, mais ont également une largeur et une hauteur comme des éléments de bloc. Dans votre CSS, deux text-align: center;règles sont appliquées à <body>et à #slideshowWrapper(ce qui est redondant btw), ce qui fait que tous les éléments enfants inline et inline-block doivent être centrés dans leurs éléments de bloc les plus proches, dans votre code ce sont des libalises. Tous les éléments de bloc ont width: 100%s'ils sont le flux statique ( position: static;), qui est par défaut. Le problème est que lorsque vous dites que les libalises existent position: absolute;, vous les retirez du flux statique normal, ce qui les amène à réduire leur taille pour s'adapter à leur contenu interne, en d'autres termes, elles "perdent" en quelque sorte leur width: 100%propriété.

Konstantine Kalbazov
la source

5

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

Julix
la source

Comment déterminez-vous W?

Purplejacket

Il a dit "une image" - idéalement lorsque vous faites des images pour le Web, vous êtes censé faire l'image à la taille que vous allez l'utiliser (plutôt que la redimensionner) pour éviter un poids inutile (si vous faites une grande image petit) ou flou (si vous agrandissez une petite image). - Vous pouvez utiliser "imageElement.naturalHeight" et "imageElement.naturalWidth" si vous utilisez jQuery, puis un style dynamique également, mais cela devient un peu compliqué. Pour être juste, la plupart des autres réponses exigent également que vous connaissiez la largeur de l'image pour que leur technique fonctionne.

Julix

si vous ne savez pas vraiment comment obtenir W, dans Chrome, vous pouvez utiliser CTRL + Shift + i (outils de développement), puis CTRL + Shift + C (mode d'inspection) pour survoler les éléments et voir la largeur des choses. Vous pouvez également décider de la largeur souhaitée et ajouter "width: Wpx" à votre CSS.

Julix

4

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 obtenir 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 se trouve en bas. Dans ma révision, je centre à la fois 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 définie sur absolue.

Mais ce comportement peut être imité!

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

Entourez votre image d'un div ou d'une autre balise (dans votre cas, un li).
```
<div class="absolute-div">
  <img alt="my-image" src="#">
</div>
```
Remarque: Les noms donnés à ces éléments ne sont pas spéciaux.

Modifiez votre css ou scss pour donner le positionnement absolu div et votre image centrée.

.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 attributes
  // i.e. - 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 doit être centré!

Votre code:

Essayez ceci:

body
{
  text-align : center;
}

#slideshow
{
  list-style : none;
  width      : 800px;
  // alter to taste

  margin     : 50px auto 0;
}

#slideshow li
{
  position : absolute;
}

#slideshow img
{
  border  : 1px solid #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 attribute below. 

  margin  : 0 auto;
}

<ul id="slideshow">
    <li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 1" /></li>
    <li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 2" /></li>
</ul>

Développer l'extrait

J'espère que cela a été utile. Bonne chance!

D3RPZ1LLA
la source

3

Un objet absolu à l'intérieur d'un objet relatif est relatif à son parent, le problème ici est que vous avez besoin d'une largeur statique pour le conteneur #slideshowWrapper, et le reste de la solution est comme le disent les autres utilisateurs

body {
    text-align: center;
}

#slideshowWrapper {
    margin-top: 50px;
    text-align:center;
    width: 500px;
}

ul#slideshow {
    list-style: none;
    position: relative;
    margin: auto;
}

ul#slideshow li {
    position: relative;
    left: 50%;
}

ul#slideshow li img {
    border: 1px solid #ccc;
    padding: 4px;
    height: 450px;
}

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

eveevans
la source

Votre violon alors que les deux images s'empilent.

Ryan Gibbons

3

Voici la solution simple et la meilleure pour l'élément central avec «position: absolue»

 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:#ddd;
 border:1px solid #999;
 height:100px;
 text-align:center
 }

<style>

</style>

<body>
 <div class='center'>
  should be centered verticaly
 </div>
</body>

Développer l'extrait

SantoshK
la source

2

Vous pouvez essayer de cette façon:

* { margin: 0px; padding: 0px; }
#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; }

<html>
<body>
	<div id="body" class="container-fluid">
	  <!--Background-->
	    <!--Text-->
		  <div class="text">
		    <p>Random</p>
		  </div>	  
	</div>
</body>
</html>

Développer l'extrait

Chirag Dave
la source

1

La position absolue la retire du flux et la place à 0x0 par rapport au parent (dernier élément de bloc à avoir une position absolue ou relative).

Je ne sais pas exactement ce que vous essayez d'accomplir, il vaut peut-être mieux définir le li à un position:relative et cela les centrera. Compte tenu de votre CSS actuel

Consultez http://jsfiddle.net/rtgibbons/ejRTU/ pour jouer avec

Ryan Gibbons
la source

: / à la fin est presque la même solution que la vôtre ... <Vote vers le haut

eveevans

1

#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 pas où j'ai vu la méthode de centrage indiquée ci-dessus, en utilisant des valeurs négatives en haut, à droite, en bas et à gauche. Pour moi, cette tehnique 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 paramètres 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 rapport d'aspect d'un div avec CSS

Marian07
la source

0

Ce qui semble se produire, c'est qu'il y a deux solutions; centré en utilisant les marges et centré en utilisant la position. Les deux fonctionnent correctement, mais si vous souhaitez positionner en absolu un élément par rapport à cet élément centré, vous devez utiliser la méthode de position absolue, car la position absolue du deuxième élément correspond par défaut au premier parent positionné. Ainsi:

<!-- CENTERED USING MARGIN -->
<div style="width:300px; height:100px; border: 1px solid #000; margin:20px auto; text- align:center;">
    <p style="line-height:4;">width: 300 px; margin: 0 auto</p>
    <div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:-20px; left:0px;">
        <p style="line-height:4;">Absolute</p>
    </div>
</div>

<!-- CENTERED USING POSITION -->
<div style="position:absolute; left:50%; width:300px; height:100px; border: 1px solid #000; margin:20px 0 20px -150px; text-align:center;">
    <p style="line-height:2;">width:300px; position: absolute; left: 50%; margin-left:-150px;</p>
    <div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:0px; left:-105px;">
        <p style="line-height:4;">Absolute</p>
    </div>
</div>

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 l'équilibrer. Pas beau. Merci!

Deane Nettles
la source

0

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

Bibaswann Bandyopadhyay
la source

-1

html, body, ul, li, img {
  box-sizing: border-box;
  margin: 0px;  
  padding: 0px;  
}

#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 #ccc;
  padding: 4px;
  //width: 200px;
  height: 100px;
}

<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="http://via.placeholder.com/350x150" alt="Dummy 1" /></li>
      <li><img src="http://via.placeholder.com/140x100" alt="Dummy 2" /></li>
      <li><img src="http://via.placeholder.com/200x100" alt="Dummy 3" /></li>      
    </ul>
  </div>
</body>

Développer l'extrait

antelove
la source

1

Cette réponse n'a que du code. Bien qu'il puisse être correct, il devrait avoir une explication d'accompagnement expliquant pourquoi le code répond à la question du PO. Le code n'est pas "auto-explicatif" sur Stack Exchnge.

JBH

Comment centrer un élément «position: absolu»

Réponses:

Explication

Explication

Mais ce comportement peut être imité!

Et voila! Votre img doit être centré!

Votre code: