Voor het maken van een site gebruik ik regelmatig een tijdelijke pagina todat de uiteindelijke site klaar is. In deze tijdelijke pagina wil ik dan een logo plaatsen dat precies gecentreerd wordt in het midden van het scherm, dat is, zowel verticaal en horizontaal gecentreerd.
Eerste poging was om het logo element een class “gecentreerd” te geven en vervolgens class te definiëren als:
.centered {
position: fixed;
top: 50%;
left: 50%;
}
Maar werkt niet helemaal. De linkerbovenhoek van de afbeelding komt nu precies in het midden van de pagina, niet in het midden van de afbeelding in het midden van de pagina.
Om het logo precies gecentreerd te krijgen is het een kwestie van toevoegen van een negatieve marge voor boven van de helft van de hoogte van het logo, en een negatieve linkermarge van de helft van de breedte van het logo . Voor dit voorbeeld:
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
Geef een reactie