ReactJS + React Router：如何使 div 居中？

Posted 2023-02-21

技术标签:

【中文标题】ReactJS + React Router：如何使 div 居中？【英文标题】：ReactJS + React Router: How to center div? 【发布时间】：2017-06-26 19:37:40 【问题描述】：

我目前设置了一个 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 设置为更高的级别，但仍然无法正常工作。

【问题讨论】：

你在里面对齐的元素应该是一个标签，比如一个。您需要在 html、Body 上设置样式以告知您希望最小高度和最小宽度为 100vh（视图高度）和 100vw（视图宽度）。 .container 的每个家长也需要height: 100%; @Win 那么我应该在树的哪个位置添加高度和宽度？ @MichaelCoker 添加到每个父母，但仍然相同...... 确保包含：- html, body min-height: 100vh;最小宽度：100vw； 【参考方案1】：

在 React 中你需要使用 className 而不是 class。 className="wrapper

【讨论】：

我知道，但在元素下的 Chrome 开发工具中，它只显示为类，而且包装器没有任何样式。【参考方案2】：

是的，为了反应，

for 变成 htmlFor，class 变成 className 等等。

在此处查看如何更改 HTML 属性的完整列表：

https://facebook.github.io/react/docs/dom-elements.html

【讨论】：

我知道，但在元素下的 Chrome 开发工具中，它只显示为类，而且包装器没有任何样式。【参考方案3】：

这是一个代码示例，它基本上重新创建了您的页面，但没有反应。希望这对您有所帮助，如果您有任何问题，请立即离开。

html, body
  width: 100%;
  height: 100%;


.wrapper
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;


.container 
  height: 300px;
  width: 300px;
  background: black;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;

<html>
<body>
  <div class="wrapper">
    <div data-reactroot>
      <div class="container">
        <div>
          <!-- Anything below this line will be centered -->
          <div>Hello World!</div>
          <div>Center Me</div>
          <!-- Anything above this line will be centered -->
        </div>
      </div>
    </div>
  </div>
</body>
<html>

【讨论】：

在我接受答案并投票之前，说如果我还有另一个<div> 或<p>，如何将它添加到下一行并使其居中？我刚刚在<div>Center Me</div> 之后添加了它，它在同一行中。【参考方案4】：

只是：

<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>

【讨论】：

【参考方案5】：