<Modal show={showModal}>
  <Modal.Header>
    <div className="modal-header-content">
      <div className="modal-header-left">
        <div className="modal-header-title mt-4">Add Substitute</div>
        <div className="modal-header-subtitle">
          List your Substitute Beneficiaries below and click on Add Substitute to add them to your List
        </div>
      </div>
    </div>
    <button
      className="modal-close-button"
      onClick={handleCloseModal}
    >
      <span aria-hidden="true">&times;</span>
    </button>
  </Modal.Header>
  <Modal.Body>
    <AddSubstituteForm onSubmit={handleSubmit} />
  </Modal.Body>
  <Modal.Footer>
    <Button
      variant="primary"
      onClick={handleCloseModal}
    >
      Add Substitute
    </Button>
  </Modal.Footer>
</Modal>




You are a CSS expert.

Constraints:
1. I want to show this modal center of our screen
2. Help me to add styles for element to achieve this.
3. Modal should be at center of whole window.