<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">×</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.