在ReactJS中,要居中一个div可以使用CSS的flexbox布局或者使用绝对定位。
示例代码:
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;
}
示例代码:
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路由器的知识,可以参考腾讯云的相关产品和文档:
领取专属 10元无门槛券
手把手带您无忧上云