Reactjs 触发时，如何将我的react语义模式定位在中心位置

这是我的模式代码：

     render() {
    return <Fragment>
        <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className} trigger={<Button className="ui red icon left labeled button " >
            <i aria-hidden="true" class="trash icon" ></i>Delete</Button>}>
            <ModalHeader>{'Delete Customer'}</ModalHeader>
            <ModalBody>
                <p>Are you sure?</p>
            </ModalBody>
            <ModalFooter>
                <Button className="ui secondary button" onClick={this.handleClose}> cancel </Button>
                <Button className="ui red icon right labeled button" ><Icon name='remove' labelPosition='right' />delete</Button>
            </ModalFooter>
        </Modal>
    </Fragment>;
}

render（）{
返回
{'Delete Customer'}
你确定吗

取消
删除
;
}

下面是调用我的模式的代码，当模式被触发时，它被定位在左下角，我试着在后面加上size='mini'

    <tbody className="">
                {!cusList || cusList.length <=0 ?
                    <tr>
                        <td colSpan="6" align="center"><b>No Customers yet</b></td>
                    </tr>
                    :this.state.cusList.map(cus =>
                    <tr className="" key={cus.customerId}>
                        <td className="">{cus.name}</td>
                        <td className="">{cus.address}</td>
                        <td className="">
                            <Button className="ui yellow icon left labeled button " ><i aria-hidden="true" class="edit icon"></i>Edit</Button>
                        </td>
                        <td className="">                                      
                                <DeleteCustomerModal/>
                        </td>
                    </tr>
                )}

{！cusList | | cusList.length
{cus.name}
{cus.address}
编辑
)}

只需在.css文件中添加下面的代码，就可以对该问题进行排序

.modal {
    height: auto;
    top: auto;
    left: auto;
    bottom: auto;
    right: auto;
}