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.

To make it responsive, instead try setting the width using % or vw units. Also, to center it horizontally you can use margin: 0 auto. Centering it vertically is a little more tricky, check out this answer for more on that.