Centering

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...

How to Center Anything with CSS - Align a Div, Text, and More

Centering things is one of the most difficult aspects of CSS. The methods themselves usually aren’t difficult to understand. Instead, it’s more due to the fact that there are so many ways to center things. The method you use can vary depending on the HTML element you’re trying

freeCodeCamp.orgKris Koishigawa