Centrage absolu CSS

Récemment, je suis tombé sur cette méthode utilisée pour positionner un élément à la fois horizontalement et verticalement au centre. Cependant, je n’ai pas pu déterminer ce que chaque propriété fait. Quelqu’un pourrait-il m’expliquer quel est l’effet sur la mise en top:0, bottom:0, left:0, right:0 ?

(Ce serait bien si vous pouviez l’expliquer en utilisant le terme de profane ou fournir une image illustrative.)

En outre, quelle est l’utilisation de l’affichage sur table?

 .absolute-center { position: absolute; display: table; height: auto; width: 500px; margin: auto; top: 0; bottom: 0; right: 0; left: 0; border: solid 1px red; } 
 

What is this sorcery?

Vous pouvez réduire le css à ceci:

 .absolute-center { position:absolute; width: 500px; height: 100px; margin: auto; top: 0; bottom: 0; right: 0; left: 0; border: solid 1px red; } 
 

What is this sorcery?

Brisons-le un peu:

Si vous avez le CSS suivant (je l’applique à votre balisage actuel):

 .absolute-center { position:absolute; height: auto; margin: auto; background: red; top: 0; bottom: 0; right: 0; left: 0; } 

Vous pouvez voir que le div.absolute-center remplit l’intégralité de l’élément parent (dans ce cas, le body ), en définissant simplement toutes les propriétés en top , en bottom , à right et à left .

Démo: http://jsfiddle.net/0osLv27k/

Ainsi, lorsque nous ajoutons de la width (en plus de la height ) au CSS précédent, l’élément est limité à cette taille.

Démo: http://jsfiddle.net/0osLv27k/1/

Et enfin la margin: auto magique margin: auto qui permet de centrer l’élément.

Démo: http://jsfiddle.net/0osLv27k/2/

Vous devez seulement append les positions supérieure et gauche et append la transformation. Si vous n’avez pas besoin de largeur fixe, il n’est pas difficile de supprimer la width du css et aussi si le texte que vous voulez est centré à l’intérieur de p add padding else le supprime. Essaye ça:

 .absolute-center { position:absolute; width: 500px; padding:50px 0; top: 50%; left: 50%; border: solid 1px red; text-align:center; transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); display:inline-block; vertical-align:middle; } 
 

asdsdada

Vérifiez ceci … HTML est

 

CSS est

 .absolute-center { margin: auto; background: red; width: 100px; height: 100px; position:absolute; top: 0; bottom: 0; right: 0; left: 0; }