Render Material-UI Modal in the center of the Screen

The Material-UI Modal component is a very powerful and commonly used component in the ReactJS community. Unfortunately it is badly documented. One of the most common questions is how to center the modal to the center of the screen. Well the solution is actually quite simple, just add a style prop as follows:

        <Modal
          style={{ alignItems: "center", justifyContent: "center" }}
          open={this.state.openModal}
          onClose={this.handleCloseModal}
        >
          ...
        </Modal>


Post a Comment