问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

ReactJS React 路由器：如何使 div 居中？

社区维基
1
新手上路，请多包涵

我目前设置了一个 ReactJS + React Router 项目，并且在 Chrome 开发工具中的元素下显示：

 <body>
  <div class="wrapper">
    <div data-reactroot>
      <div>
        <div class="container">Center Me</div>
      </div>
    </div>
  </div>
</body>

有样式，没有 class="wrapper" ：

 .container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

然而 <div class="container">Center Me</div> 保持在顶部并水平居中但不是垂直居中。

我检查了那个 div 的大小，它非常短，但占据了浏览器页面的整个宽度。

我可能做错了什么？我怎样才能居中 <div class="container">Center Me</div> ？我什至尝试将 100% for width and height 设置为更高的级别，但仍然无法正常工作。

原文由 Jo Ko 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascripthtmlcssreactjsreact-router
阅读 692
1 个回答
得票最新
社区维基
1

只是：

 <div style={{display: 'flex',  justifyContent:'center', alignItems:'center', height: '100vh'}}>
    <h1> I am centered </h1>
</div>

或CSS：

 .centered {
  height: 100vh; /* Magic here */
  display: flex;
  justify-content: center;
  align-items: center;
}

 <div class="centered">
  <h1> I am centered </h1>
</div>

原文由 Trọng Nguyễn Công 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题