CSS - Div centreren


Div horizontaal centreren

Websites met een vaste breedte staan soms aan de linkerkant van het scherm maar doorgaans staan deze wbesites in het midden van het scherm. Door middel van CSS en een omliggende div kun je een website eenvoudig in het midden horizontaal centreren en zodoende daarin de inhoud plaatsen. In de CSS hoef je dan alleen maar "margin: 0px auto;" te plaatsen voor de omliggende div die doorgaans vaak container wordt genoemd.

.container {
        margin: 0px auto;
}


Demo

Nu zal de div in het midden worden gecentreerd zoals je kunt zien in de demo hierboven. Geef dan zelf nog de breedte op voor de omliggende container evenals andere aanvullende eigenschappen. De volledige code toegepast in de demo zie je hieronder.

.container {
        margin: 0px auto;
        width: 100px;
        height: 100px;
        background-color:#FF0000;
}

Div horizontaal en verticaal centreren

Het is ook mogelijk een div zowel horizontaal als verticaal te centreren zodat de div echt in het midden staat. Dit vergt meer code en kan bereikt worden op onderstaande manier.

De gehele code staat hieronder. De code is van toepassing op de omliggende div met de classnaam container. De div heeft in de demo een breedte en een hoogte gekregen van 100 pixels, pas dit uiteraard aan naar wens. Bij margin-left en margin-top vul je zoals hieronder dan de helft van de gegeven breedte en hoogte in met een "-" minteken ervoor.

.container {
        position: absolute;
        margin: 0 auto;
        width: 100px;
        height: 100px;
        top: 50%;
        left: 50%;
        margin-left: -50px;
        margin-top: -50px;
        background-color:#FF0000;
}


Met de bovenstaande code ziet het er als volgt uit in de Demo.

Content verticaal centreren

Het centreren van content bijvoorbeeld geplaatst binnen een div is niet direct eenvoudig. In het geval van een tabel kan er simpelweg vertical-align:middle; worden aangegeven maar dat werkt helaas niet met een div. Er zijn echter wel manieren om het verticaal centreren voor elkaar te krijgen waaronder de onderstaande manier, hieronder eerst een voorbeeld.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vel libero. Phasellus convallis, dolor in bibendum ultrices.

In het bovenstaande geval gaat het om een extra div die is toegevoegd.

<div class="center"><div class="inner">Lorem Lipsum Dolor Simet</div></div>


De CSS is dan als volgt, dit werkt in moderne browers en in Internet Explorer 8 en hoger.

div.center {
        width:100%;
        height:150px;
}

div.center:before {
        content:"";
        display:inline-block;
        height: 100%;
        vertical-align:middle;
}

div.center div.inner {
        display:inline-block;
        vertical-align:middle;
}