[class^="container-float"] { height: 100vh; /* Unit irrevelant */ } [class^="container-float"]::after { content: ""; display: table; clear: both; } [class^="centered-float"] { position: relative; float: left; /* Collapses box */ top: 50%; left: 50%; transform: translate(-50%, -50%); }
[class^="container-noFixedHeight"] { position: relative; min-height: 100vh; /* Unit irrevelant */ } [class^="centered-noFixedHeight"] { position: absolute; /* Collapses box */ top: 50%; left: 50%; transform: translate(-50%, -50%); }
[class^="container-absolute"] { position: relative; height: 100vh; /* Unit irrevelant */ } [class^="centered-absolute"] { position: absolute; max-width: 50%; max-height: 18.5rem; top: 0; left: 0; bottom: 0; right: 0; margin: auto; }
.container-flexbox { /* Unsupported in IE9 */ height: 100vh; /* Unit irrevelant */ display: flex; /* Collapses box */ align-items: center; justify-content: center; } .centered-flexbox { }
More options and variants: Absolute horizontal vertical centering CSS