ReactJS + React路由器:如何居中div？

在ReactJS中，要居中一个div可以使用CSS的flexbox布局或者使用绝对定位。

1. 使用flexbox布局：
   • 在父容器上设置display为flex，这样子元素会自动排列在一行上。
   • 在父容器上设置justify-content为center，这样子元素会在水平方向上居中。
   • 在父容器上设置align-items为center，这样子元素会在垂直方向上居中。

示例代码：

import React from 'react';

import './styles.css';

const App = () => {

 return (

   <div className="container">

     <div className="centered-div">居中的div</div>

   </div>

 );

};

export default App;

CSS样式（styles.css）：

.container {

 display: flex;

 justify-content: center;

 align-items: center;

 height: 100vh;

}

.centered-div {

 background-color: #f0f0f0;

 padding: 20px;

}

1. 使用绝对定位：
   • 在父容器上设置position为relative，这样子元素的绝对定位会相对于父容器进行定位。
   • 在子元素上设置position为absolute，这样子元素可以脱离文档流进行定位。
   • 在子元素上设置left和top为50%，这样子元素的左上角会位于父容器的中心点。
   • 在子元素上设置transform为translate(-50%, -50%)，这样子元素的中心点会位于父容器的中心点。

示例代码：

import React from 'react';

import './styles.css';

const App = () => {

 return (

   <div className="container">

     <div className="centered-div">居中的div</div>

   </div>

 );

};

export default App;

CSS样式（styles.css）：

.container {

 position: relative;

 height: 100vh;

}

.centered-div {

 position: absolute;

 left: 50%;

 top: 50%;

 transform: translate(-50%, -50%);

 background-color: #f0f0f0;

 padding: 20px;

}

以上是使用ReactJS和React路由器居中div的方法。如果你想了解更多关于ReactJS和React路由器的知识，可以参考腾讯云的相关产品和文档：

• ReactJS
• React路由器