如果你不需要支持旧的浏览器，你可以看看Flexbox。
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
试试这样的东西：

<div style={{display: 'flex', justifyContent: 'center'}}>
  <div>centered content</div>
</div>

偏移量：第一个使用Bootstrap自己的偏移量类，因此不需要更改标记，也不需要额外的CSS。关键是将偏移量设置为行剩余大小的一半。因此，例如，大小为6的列将通过添加偏移量3来居中，即（12-6）/2。
在标记中，这看起来像：

<div class="row">
    <div class="col-md-6 col-md-offset-3"></div>
</div>

margin-auto：您可以使用边距将任何列大小居中：0 auto;技术，您只需要注意Bootstrap的网格系统添加的浮动。我建议像下面这样定义一个自定义CSS类：

.col-centered{
    float: none;
    margin: 0 auto;
}

现在，您可以将其添加到任何屏幕大小的任何列大小，它将与Bootstrap的响应式布局无缝协作：

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

使用react-bootrsrap的一个简单方法是

<Grid>
   <Row className="text-center"><h1>Our Products</h1></Row>
</Grid>

使用className（而不是class）来利用Bootstrap内置的“text-center”类。

使用react-bootstrap：

export default class CenterView extends React.Component {
    render() {
        return (
            <Grid>
                <Row className="show-grid">
                    <Col xs={1} md={4}></Col>
                    <Col xs={4} md={4}>{this.props.children}</Col>
                    <Col xs={1} md={4}></Col>
                </Row>
            </Grid>
        )
    }
}

然后用代码

<CenterView>
    <LoginForm/>
</CenterView>

在import和React类之间设置这个

const styles = {
  center: {
    marginLeft: "auto",
    marginRight: "auto"
  }
}

然后使用

<div className={styles.center}>
  hi
</div>

我只是补充说：

<Grid container spacing={2} justify="center"></Grid>

对于使用React Bootstrap的人，这里我展示了一个类text-align和justify-content-center的例子。正如名称所描述的，一个用于居中文本，另一个用于居中元素。

className={"d-flex justify-content-center"}

把这个放在你想让内部元素居中的任何地方。

Bootstrap中的常规类也可以与react一起工作，只是需要原始的import "./bootstrap/bootstrap.min.css";文件，我经常使用

<div className={"d-block m-auto"}> Content here </div>
   <div className={"text-center"}>Hello</div>
   <div className={"d-flex justify-content-center align-items-center"}>Content here</div>