CSS ReactJS + React Router: 如何居中div

在本文中，我们将介绍如何使用CSS在ReactJS和React Router中居中一个div。

阅读更多：CSS 教程

居中div的基本方法

要居中一个div，我们可以使用以下方法之一：

使用flex布局
在父元素的样式中添加display: flex; justify-content: center; align-items: center;，这将使子元素在水平和垂直方向上居中。

示例代码如下：
```
.container {
 display: flex;
 justify-content: center;
 align-items: center;
}
```
```
<div className="container">
 {/* 内容 */}
</div>
```
使用绝对定位和transform
在父元素的样式中添加position: relative;，在子元素的样式中添加position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%;，这将使子元素相对于父元素居中。

示例代码如下：
```
.container {
 position: relative;
}

.centered {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
```
```
<div className="container">
 <div className="centered">
   {/* 内容 */}
 </div>
</div>
```

使用React Router居中页面内容

在使用React Router时，我们通常需要在组件中居中页面内容。以下是一种常见的做法：

创建一个布局组件
我们可以创建一个布局组件，该组件将用作页面内容的容器。在该组件的样式中，使用上述居中div的方法来居中页面内容。

示例代码如下：
```
.container {
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
}
```
```
function Layout({ children }) {
 return (
   <div className="container">
     {children}
   </div>
 );
}
```

在路由中使用布局组件

在路由配置中，使用上面创建的布局组件作为页面组件的容器。这样，每个页面组件都会在布局组件中居中显示。

示例代码如下：

<Router>
 <Switch>
   <Route exact path="/" render={() => (
     <Layout>
       {/* 首页内容 */}
     </Layout>
   )} />
   <Route path="/about" render={() => (
     <Layout>
       {/* 关于页内容 */}
     </Layout>
   )} />
 </Switch>
</Router>

这样，我们就可以在ReactJS和React Router中居中一个div或者页面内容了。