Center Divs, Elements and Images with CSS

I’ve always struggled to get images, divs and elements to center vertically and horizontally using CSS. But thanks to some great resources online I’ve found these two solutions that work for me. These CSS solutions both use absolute positioning to center the object / image.

Centered Div Block using CSS

#containter-block {
  height: 400px;
  position: relative;
}

#element-to-center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Centered Image Horizontal and Vertical using CSS

#container-block {
  height: 600px;
  position: relative;
}

img {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Special thanks to these two sites – w3schools.com and freecodecamp.org.