Different ways to center an element with CSS

center.css

.container {
  position: relative; 
}

.object: {
  position: absolute;
  top: 50%;  // moves the element 50% from the top of the container
  left: 50%; // moves the element 50% from the left of the container
  transform: translate(-50%, -50%); // move the element back up and to the left half of its total size
}


.container-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}