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%);
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%);