web-dev-qa-db-fra.com

Comment centrer un élément "position: absolute"

Je rencontre un problème pour centrer un élément dont l'attribut position est dé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>
htmlcsscss-positioncentering
591
user1098278
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
1045
baaroz

Sans connaître la width/height du positionné1 élément, 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 Transformest pris en charge par IE9 et les versions ultérieures . (Préfixes du fournisseur omis pour des raisons de brièveté)

Explication

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

Cela est dû au fait qu'une valeur de pourcentage des propriétés top / left est relative à la hauteur/largeur de l'élément parent (qui crée un bloc conteneur).

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

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

1. Un élément avec position autre que static. C'est à dire. relative, absolute, fixed valeurs.

507
Hashem Qolami

Centrer quelque chose absolutely positionné est plutôt compliqué en CSS.

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

}

Remplacez margin-left par (négatif) la moitié de la largeur de l’élément que vous essayez de centrer.

176
bookcasey

centre aligné verticalement et horizontalement

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

Remarque: la largeur et la hauteur des éléments doivent être définies

78
Sebin Simon

Un truc simple en CSS, ajoutez simplement:

width: 100%;
text-align: center;

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

51
cutez7boyz

Si vous voulez 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 que le 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 voulez qu'un conteneur soit centré de haut en bas, indépendamment du fait d'être 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 cela un autre nouveau tour il y a quelques mois. En supposant que vous ayez un élément parent relatif.

Voici 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 à spécifier largeur ET hauteur. Celui-ci adapte le contenu de l'élément lui-même.

44
Wesley Brian Lachenal

Cela a fonctionné pour moi:

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

pour centrer une position: attribut absolu, 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 bourgeon pas à gauche juste en 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>
25
Rednas

Centrer un élément "position: absolu".

.your-element {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center; // or this ->  margin: 0 auto;
}
25
Vadamadafaka
    <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 élément position: absolute lors de l'ajout de left: 0; right: 0;

16
Mohammad Dayeh

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

<div style="width:256px; height: 256px; position:relative;">
      <img src="photo.jpg"/>
</div>
14
Stéphane de Luca

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

7
joseantgv

probablement le plus court

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

enter image description here

Je ne suis pas sûr de ce que vous voulez accomplir, mais dans ce cas, il ne suffit que d'ajouter width: 100%; à votre ul#slideshow li.

Explication

Les balises img sont des éléments de bloc en ligne. Cela signifie qu’ils s’écoulent en ligne comme du texte, mais qu’ils ont une largeur et une hauteur similaires à celles des éléments de bloc. Dans votre css, il y a deux règles text-align: center; appliquées au <body> et au #slideshowWrapper (ce qui est redondant d'ailleurs). Ainsi, tous les éléments enfants inline et inline-block sont centrés sur leurs éléments les plus proches. éléments de bloc, dans votre code, il s’agit de balises li. Tous les éléments de bloc ont width: 100% s'il s'agit du flux statique (position: static;), qui est la valeur par défaut. Le problème est que, lorsque vous indiquez que les balises li sont position: absolute;, vous les sortez du flux statique normal, ce qui les oblige à réduire leur taille pour s’adapter simplement à leur contenu intérieur. de "perdre" leur propriété width: 100%.

5
Konstantin Kalbazov

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

5
Julix

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 tout élément de bloc DOM, pas seulement img.

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

    <div class="absolute-div">
  <img alt="my-image" src="#">
</div>

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

  2. Modifiez votre css ou scss pour donner à la div le positionnement absolu 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 devrait ê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>

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

4
D3RPZ1LLA

Un objet absolu à l'intérieur d'un objet relatif est relatif à son parent. Le problème est que vous avez besoin d'une largeur statique pour le conteneur #slideshowWrapper et que le reste de la solution ressemble à ce que 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/

3
eveevans

Voici la solution la plus simple et la meilleure pour les éléments centraux 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:#ddd;
 border:1px solid #999;
 height:100px;
 text-align:center
 }
 
 
<style>

</style>

<body>
 <div class='center'>
  should be centered verticaly
 </div>
</body>
3
SantoshK
#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 haut, droite, 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 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:
Conserver les proportions d'un div avec CSS

1
Marian07

Position absolute le sort du flux et le place à 0x0 dans le parent (dernier élément de bloc ayant une position absolue ou une position relative).

Je ne sais pas exactement ce que vous essayez d'accomplir. Il serait peut-être préférable de définir le li sur un position:relative et que cela les centre. Compte tenu de votre CSS actuel

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

1
Ryan Gibbons

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>
1
Chirag Dave

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

0
Bibaswann Bandyopadhyay

Ce qui semble se passer, c'est qu'il y a deux solutions. centré à l'aide des marges et centré à l'aide de la position. Les deux fonctionnent correctement, mais si vous souhaitez positionner de manière absolue un élément par rapport à cet élément centré, vous devez utiliser la méthode de la position absolue, car la position absolue du deuxième élément est définie par défaut sur le 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 marge: 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!

0
Deane Nettles