Centrer un div fixe

Petit bout de code commenté permettant de centrer verticalement et horizontalement un div sur une page.
Parce que il y en a marre de passer du temps sur des sujets aussi simples.

#mondivfixe {
position: fixed;
width: 300px;/* la largeur est obligatoire cf margin-left*/
height: 300px;/* la hauteur est obligatoire cf margin-top*/
left: 50%; /* le coté gauche du div est placé à la moitié de l’écran et donc trop loin vers la droite de 50% de la largeur du div, 50% qu’on va enlever avec l’instruction margin-left ci-dessous*/
margin-left: -150px; /* le div est décalé de 150px vers la gauche,c’est à dire 50% du width (300 ici) */
top: 50%; /* le haut du div est placé à la moitié de l’écran et donc trop loin vers le bas de 50% de la hauteur du div, 50% qu’on va enlever avec l’instruction margin-top ci-dessous*/
margin-top: -150px; /* le div est décalé de 150px vers le haut,c’est à dire 50% du height (300 ici) */
}

Mon div fixe

NB: le code qui permet de faire apparaître le div en cliquant sur le bouton uniquement en CSS3 est aussi très sympa … surtout avec WordPress qui rajoute des balises <p> et <br> tout seul…grrrrr…L’astuce: ne pas sauter de ligne en mode texte et ne surtout surtout surtout ne pas passer par le mode visuel (de wordpress donc)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Merci de renseigner le captcha ! * Time limit is exhausted. Please reload CAPTCHA.