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)