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


J'ai un problème pour centrer un élément qui a l'attribut position mis à 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>


502
2017-12-14 16:47


origine


Réponses:


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

907
2017-08-28 11:17



Sans connaître le 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 convient de noter que Transformation CSS  est pris en charge dans IE9 et au-dessus. (Préfixes du fournisseur omis pour des raisons de concision)


Explication

Ajouter top/left de 50% déplace le bord de la marge supérieure / gauche de l'élément au milieu du parent, et translate() fonction avec le (négatif) valeur de -50% déplace l'élément de la moitié de sa taille. Par conséquent, l'élément sera positionné au milieu.

C'est parce qu'un pourcentage sur top/left Les propriétés sont relatives à la hauteur / largeur de l'élément parent (qui crée un bloc conteneur).

Alors qu'un pourcentage sur translate()  transformer la fonction est relative à la largeur / hauteur de l'élément lui-même (En fait, il se réfère à la taille de boîte de délimitation).

Pour l'alignement unidirectionnel, aller avec translateX(-50%) ou translateY(-50%) au lieu.


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


405
2017-09-10 22:48



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

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

}

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


163
2017-12-14 16:52



Div centre verticalement et horizontalement aligné 

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


72
2018-01-28 10:22



Un simple tour de CSS, ajoutez simplement:

width: 100%;
text-align: center;

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


44
2017-10-29 15:49



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 voulez 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 voulez qu'un conteneur soit centré de haut en bas, indépendamment du fait 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 cela un autre nouveau tour 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 à spécifier la largeur et la hauteur. Celui-ci adapte le contenu de l'élément lui-même.


40
2018-05-24 01:55



pour centrer une position: attribut absolu que vous devez définir à gauche: 50% et margin-left: -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 avec à gauche juste avec le haut. (NOTE: html et body 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>

24
2017-12-14 17:02



Cela a fonctionné pour moi:

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

22
2017-09-06 14:53