Veel layouts op internet hebben tegenwoordig een gecentreerde website. De gehele inhoud staat dan in een <div> die een vaste breedte heeft en in het midden van de pagina staat. Op deze pagina gaan we het dus hebben om elementen te centreren. Als je tekst wil centreren kan je dat doen met de "text-align: center;" property.
De truc om dit met CSS voor elkaar te krijgen zit hem in de margin stijlregel (weet je nog, daarmee geef je de ruimte aan de buitenkant van de border aan). Als elementen zowel links als rechts een margin met de waarde auto hebben berekend de browser de juiste waardes zodat dat element precies in het midden komt te staan.
Vergeet niet het element ook een width te geven, standaard zijn elementen namelijk 100% breed en dan zie je niet meer dat het eigenlijk gecentreert is.
#content {
margin-left: auto;
margin-right: auto;
width: %;
border: 1px solid black;
}
<div id="content">Gecentreerde div</div>
Je kan dit ook korter opschrijven tot margin: 0 auto 0 auto;. Deze kortere notatie noemt in de volgorde top, right, bottom, left alle margins op (te onthouden als: vanaf top met de klok mee). Hiermee maak je je element gecentreerd en geef je tegelijk aan dat deze een top en bottom margin heeft van 0. Als dat nog teveel typwerk kan je het zelfs opschrijven als margin: 0 auto;
#content {
margin: 0 auto;
width: 60%;
border: 1px solid black;
}
<div id="content">Nog een gecentreerde div</div>