Comment centrer une « position : absolute » élément

Question

Je vais avoir un problème de centrage un élément qui possède l’attribut la valeur . Quelqu'un sait-il pourquoi les images ne sont pas centrées ?

Answer 1

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

Answer 2

Sans connaître l' width/height de la positionnés ๠é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 intéressant de noter que CSS Transform est pris en charge dans IE9 et au-dessus. (Vendeur préfixes omis par souci de concision)

---

Explication

L'ajout d' top/left de 50% déplace le haut/gauche de la marge bord de l'élément au moyen de la mère, et translate() fonction avec l' (négatif) valeur de -50% déplace l'élément par la moitié de sa taille. D'où l'élément sera placé au milieu.

C'est parce qu'un pourcentage de la valeur sur top/left propriétés est par rapport à la hauteur/largeur de l'élément parent (qui est la création d'un bloc contenant).

Tandis qu'une valeur en 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 la boîte englobante).

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

---

^{1. Un élément avec un position autres qu' static. I. e. relative, absolute, fixed valeurs.}

Answer 3

Quelque chose de centrage `` ly positionné est plutôt compliqué en CSS.

Changement `` (négatif) de la moitié de la largeur de l’élément que vous voulez centrer.

Answer 4

Div verticalement et horizontalement alignés Centre

Answer 5

Un CSS simple astuce, il suffit d’ajouter :

Cela fonctionne sur des images et du texte.