2023-09-05

Vijfien manieren om een blok-element horizontaal én verticaal te centreren

(De buitenste groene <div> heeft overal de afmetingen width: 600px; max-width: 90vw; height: 300px;)

Binnenste <div> heeft een vaste breedte en hoogte van 200 px

Met alleen marge

Gecentreerde element: width: 200px; height: 200px; overflow: auto; margin: 50px auto;

Met marge en padding

Container: box-sizing: border-box; padding-top: 50px;
Gecentreerde element: width: 200px; height: 200px; overflow: auto; margin: 0 auto;

position: absolute met negatieve marge

Container: position: relative;
Gecentreerde element: width: 200px; height: 200px; overflow: auto; position: absolute; top: 50%; left: 50%; margin: -100px 0 0 -100px;

position: absolute met calc()

Container: position: relative;
Gecentreerde element: width: 200px; height: 200px; overflow: auto; position: absolute; top: calc(50% - 100px); left: calc(50% - 100px);

position: absolute met margin: auto

Container: position: relative;
Gecentreerde element: width: 200px; height: 200px; overflow: auto; margin: auto auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0;

position: fixed met margin: auto

Container: transform: translateX(0);
Gecentreerde element: overflow: auto; margin: auto auto; position: fixed; top: 0; right: 0; bottom: 0; left: 0;

css-tabel met text-align: center
(zie uitleg voor alle css)

Container: display: table-cell; text-align: center; vertical-align: middle;
Gecentreerde element: display: inline-block; width: 200px; height: 200px; overflow: auto; text-align: left;

css-tabel met marge
(zie uitleg voor alle css)

Container: display: table-cell; vertical-align: middle;
Gecentreerde element: width: 200px; height: 200px; overflow: auto; margin: 0 auto;

flexbox

Container: display: flex; justify-content: center; position: relative;
Gecentreerde element: width: 200px; height: 200px; overflow: auto; align-self: center;

grid

Container: display: grid; justify-content: center; position: relative;
Gecentreerde element: width: 200px; height: 200px; overflow: auto; align-self: center;

Binnenste <div> heeft een vaste breedte van 200 px en een relatieve hoogte

(De relatieve hoogte is ten opzichte van de buitenste <div>)

text-align met display: inline-block

Container: height: auto; line-height: 20rem; text-align: center;
Gecentreerde element: display: inline-block; width: 200px; height: auto; max-height: 20rem; line-height: normal; text-align: left; vertical-align: middle; padding-bottom: 60px;

Binnenste <div> heeft een relatieve breedte en hoogte

(De relatieve breedte en hoogte is ten opzichte van de buitenste <div>)

Alleen percentages

Container: box-sizing: border-box; padding: 50px 0;
Gecentreerde element: width: 33%; min-width: 200px; height: 100%; overflow: auto; margin: 0 auto;

position: absolute met translate()

Container: position: relative;
Gecentreerde element: max-height: 30%; overflow: auto; padding-bottom: 80px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

Binnenste <div> heeft een onbekende breedte en hoogte

position: absolute met marge en translate()

Container: position: relative;
Binnenste (onzichtbare)<div>: width: 0; height: 0; margin: auto auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0;

span: display: inline-block; transform: translate(-50%, -50%);

padding met translate()

Container: border-box; padding: 150px min(300px, 45vw);
Gecentreerde element: display: inline-block; transform: translate(-50%, -50%);