Javascript Can'；带CSS的t中心圆形动画

我有一个应用程序正在此URL上运行：

如您所见，表中有一个循环加载动画。我想把这个动画放在桌子主体的中间，像这样（想象它在中心，而不是稍微向右）：

我不能让它工作。我的尝试是使用

class=progress

设置元素的样式。我试过宽度：100%；页边距：自动。我还尝试了

text align:center

。那也没用。我不知道还能尝试什么

如何使圆形动画居中

反应代码：

  render() {
    const { classes } = this.props;
    const { data, selected, rowsPerPage, page } = this.state;
    let tableBody;
    let emptyRows;
    switch(this.state.status){
      case "LOADING":
        tableBody = <CircularIndeterminate/>;
        emptyRows = undefined;
        break;
      case "LOADED":
        tableBody = <CircularIndeterminate/>;
        break;
    }

    return (
      <Paper className={classes.root}>
        <EnhancedTableToolbar
            numSelected={selected.length}
            handleClickDeleteBtn={this.handleClickDeleteBtn}
            open={this.state.open}
            handleCloseModal={this.handleCloseModal}
            handleConfirm={this.handleConfirm}
            handleCancel={this.handleCancel}
        />
        <div className={classes.tableWrapper}>
          <Table className={classes.table}>
            <EnhancedTableHead
              numSelected={selected.length}
              onSelectAllClick={this.handleSelectAllClick}
              rowCount={data === null || data === undefined ? -1 : (data.length || -1)}
            />
            <TableBody>
              {tableBody}
              {emptyRows > 0 && (
                <TableRow style={{ height: 49 * emptyRows }}>
                  <TableCell colSpan={6} />
                </TableRow>
              )}
            </TableBody>
          </Table>
        </div>
        <TablePagination
          component="div"
          count={data === null || data === undefined ? 0 : data.length || 0}
          rowsPerPage={rowsPerPage}
          page={page}
          backIconButtonProps={{
            'aria-label': 'Previous Page',
          }}
          nextIconButtonProps={{
            'aria-label': 'Next Page',
          }}
          onChangePage={this.handleChangePage}
          onChangeRowsPerPage={this.handleChangeRowsPerPage}
        />
      </Paper>
    );
  }
}

render（）{
const{classes}=this.props；
const{data，selected，rowsPerPage，page}=this.state；
让桌体；
让我们清空它；
开关（this.state.status）{
案例“加载”：
表体=；
emptyRows=未定义；
打破
“已加载”案例：
表体=；
打破
}
返回(
{表体}
{emptyRows>0&&(
)}
);
}
}

CircularIndeterminate.js：

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import { CircularProgress } from 'material-ui/Progress';

const styles = theme => ({
  progress: {
    margin: theme.spacing.unit * 2,
  },
});

function CircularIndeterminate(props) {
  const { classes } = props;
  return (
    <div className="progress">
      <CircularProgress className={classes.progress} size={100} thickness={4}/>
    </div>
  );
}

CircularIndeterminate.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(CircularIndeterminate);

从“React”导入React；
从“道具类型”导入道具类型；
从“材质ui/样式”导入{withStyles}；
从“物料界面/进度”导入{CircularProgress}；
常量样式=主题=>({
进展：{
边距：theme.spacing.unit*2，
},
});
功能循环确定（道具）{
常量{classes}=props；
返回(
);
}
CircularIndeterminate.propTypes={
类：PropTypes.object.isRequired，
};
导出默认样式（样式）（循环确定）；

以下是我如何解决它的（有一个答案说几乎相同的事情，但由于未知原因被删除）：

将圆放在

tr

和

td

元素中

在

td

元素上设置

colspan=6

为.progress元素设置

text align:center

代码：

---

尝试使用

display:flex

，

justify content:center

和

align items:center

到

CircularProgress

的父项。首先，链接页面上的标记无效。如果没有行

tr

和单元格

td

的包装，就不能将

div

标记插入

tbody

。

tableBody = (
          <tr>
            <td colspan="6">
              <CircularIndeterminate/>
            </td>
          </tr>
          );

.progress{
    text-align:center
}