Centering

— Published 16 May by Jen Wallace —

Background Image Centering:

html{
 background-image: url("https://loremflickr.com/320/240");
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: center center;
 background-size: cover;
}

IE10+ (preferred method)

.container-flexbox { 
  min-height: 100vh; /* Unit & size irrelevant */
  display: flex; /* Collapses box */
  align-items: center;
  justify-content: center;
}
.centered-flexbox {
}

Grid method

.container-grid {
  min-height: 100vh; /* Unit & size irrelevant */
  display: grid;
  place-content: center;
}
.centered-grid {
}

IE9+

.container-noFixedHeight {
  position: relative;
  min-height: 100vh; /* Unit & size irrevelant */
}
.centered-noFixedHeight {
  position: absolute; /* Collapses box */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

IE9+

.container-float {
  height: 100vh; /* Unit irrelevant */
}
.container-float::after {
  content: "";
  display: table;
  clear: both;
}
.centered-float {
  position: relative;
  float: left; /* Collapses box */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Hmmm...


.container-ellipsis {
  background-position: center;
  background-size: cover;
  /* Jeremy Thomas */
  background-image: url(https://unsplash.com/photos/E0AHdsENmDg/download?force=true&w=1920);
}
.centered-ellipsis {
  border-radius: 50%;
  box-shadow: inset 0 2.5rem 5rem 1.5rem rgba(0,0,0, .8), 0 0 1rem .125rem #000;
  background: linear-gradient(to bottom, #342a29 0%,#b4300a 9%,#ffc102 30%,#edddd7 44%,#e8ebf2 50%,#edddd7 56%,#ffc102 70%,#b4300a 87%,#342a29 100%);
}
.centered-ellipsis:hover {
  box-shadow: inset 0 2.5rem 5rem 1.5rem rgba(0,0,0, .8), 0 0 1rem .125rem #000;
}
.centered-ellipsis-span {
  background-color: #000;
  padding: 1rem;
  font-weight: 700;
  border-radius: 50%;
  box-shadow: 0 0 1rem 2rem #b4300a;
  box-shadow: 0 0 3vmin 4vmin #b4300a;
}

Further variants: Centering in CSS

More options and variants: Absolute horizontal vertical centering CSS

Modern CSS: Complete Guide to Centering in CSS

CSS Tricks: Centering - newest vs oldest

Photos: Unsplash

*Brit eh?

There is also this...