Comment centrer une div en absolute dans une div

Bonjour à tous,

Voila tous est dans le titre, je cherche comment centrer dans une div principal plusieurs div en absolute.
Si quelqu'un a la solution svp.

Merci.

Un schéma montrant ce que tu veux faire serait le bienvenu.

Pour centrer une div en position absolute dans une page, j'utilise personnellement :

#div {
position : absolute;
width : 500px; /* la taille de ta div en pixels */
left : 50 %; /* tout le temps */
margin-left : -250px; /* la taille de ta div divisée par 2 */
}

Bonjour ! si ta div principale est en absolue, toutes les div contenues dans celle-ci se positionneront par rapport à elle, en utilisant les attributs css top, left, bottom et right ;

Disons que par exemple, si tu veux centrer dans ta #div1 {height:200px; width:100px;}
ta #div2 {height:50px; width:50px;}

il faut faire des petits calculs !

voilà la formule pour calculer la position de la hauteur (attribut {top}) :

hauteur #div1 - hauteur #div2 = X
X /2 = "top" en px

pour revenir à l'exemple :

200 - 50 = 150
150/2 = 75

donc :

#div2 {position:relative;
height:50px;
top:75px;}

idem pour la largeur :
largeur #div1 - largeur #div2 = X
X /2 = "left" en px

100 - 50 = 50
50 /2 = 25

code complet pour cet exemple :

#div1 {position:absolute;
height:200px;
width:100px;}

#div2{position:relative;
height:50px;
width:50px;
top:75px;
left:25px;}

avec un autre calcul tu peux ramener ça en pourcentages, voilà !

Bonjour! Juste une petite question/remarque, et peut-être que je me trompe...

Mais... hypothèse:

Pour positionner un div a) en absolute dans un autre div b), cet autre div b) doit premièrement être positionné, de préférence en position:relative

Me trompe-je?

Battista a écrit :
Bonjour! Juste une petite question/remarque, et peut-être que je me trompe...

Mais... hypothèse:

Pour positionner un div a) en absolute dans un autre div b), cet autre div b) doit premièrement être positionné, de préférence en position:relative

Me trompe-je?

Pas de préférence, mais obligatoirement!