How to make Modal in the center of screen due to absolute position?

Setting sizes in percentages is a good option, another option is to use transform:

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

This will move the modal to 50% from top and left, and then adjust it back based upon the dimensions of the modal itself. This isn’t ideal for every situation, but it works well in many modal use cases.