Verticaal centreren

Bron: http://www.sceneone.nl/tips_tricks/verticaal_centreren.php

Titel: HTML en CSS tutorials

Auteur: Wybe Weysters

Een van de grote uitdagingen in een html pagina is het verticaal centreren van elementen. Dit gaat maar tot op bepaalde hoogte. Het wil zeg maar nog niet echt vloten met dat verticaal centreren.
En dat is jammer want het zou zo vaak goed van pas komen.

Volgens mij is het zelfs in tabellen vaak een probleem. Je hebt dan wel het attribuut 'valign' (vertical align), maar als ik het me goed herinner gaat dat toch ook niet altijd helemaal lekker als je dat attribuut de waarde 'middle' geeft.
Nou ja, hoe dan ook. Wij gaan het hier natuurlijk niet hebben over tabellen, maar over div's en over hoe we die verticaal kunnen centreren.

Eigenlijk zijn we daar snel klaar mee. En dat komt omdat de mogelijkheden beperkt zijn. Elk voordeel heb z'n nadeel zullen we maar zeggen.

Absoluut positioneren

Om een element verticaal te kunnen centreren moeten we het absoluut positioneren. Als je niet precies weet wat dat inhoud kun je hier meer lezen over absoluut positioneren.
Ik ga er nu even van uit dat je weet wat absoluut positioneren betekend. Dus laten we maar eens aan de gang gaan en voor de aardigheid centreren we hem niet alleen verticaal, maar meteen ook horizontaal:

CSS: #container{
position: absolute;
top: 50%;
left: 50%;
height: 300px;
width: 700px;
border: 1px solid #000;
}
HTML: <div id="container"></div>

bekijk het resultaat

Zoals je ziet klopt het nog niet helemaal, maar toch zijn we er bijna. De containerbox wordt op deze manier 50% van de top af geplaatst en 50% van links. De linker bovenhoek van de container staat in het midden van de viewport. Dit lijkt misschien niet zo, zeker op de verticale as niet, maar het is toch echt zo.

Maar goed, dat die linker bovenhoek in het midden van de pagina staat da's mooi, maar daar hebben we geen reet aan. We willen die box in het midden van de pagina zien. Dat gaan we doen door de box een aantal negatieve margins mee te geven. Zo:

CSS: #container{
position: absolute;
top: 50%;
left: 50%;
height: 300px;
width: 700px;
margin: -150px 0 0 -350px;
border: 1px solid #000;
}
HTML: <div id="container"></div>

bekijk het resultaat

Say what?

De eerste marge is een negatieve top marge van -150px. Die 150 is precies de helft van de hoogte van de box en da's niet toevallig. We willen namelijk die box tot de helft terug naar boven trekken en dat doen we dus zo.
En met de breedte doen we precies hetzelfde. We nemen de helft van de breedte, da's in dit geval dus die 350px. Dat maken we negatief en op die manier trekken we de box dus weer de helft van zijn eigen lengte terug naar links.

En zo is hij gecentreerd, horizontaal én verticaal!

Dit lukt dus alleen met absoluut gepositioneerde elementen waarvan je de hoogte en breedte weet. Dat is een behoorlijke beperking en brengt weer de nodige problemen met zich mee maar het is een manier..............en voor jou misschien wel dé oplossing

naar het begin van de pagina