ReactJS + React Router: Wie zentriert man div?

Question 1

Ich habe derzeit ein ReactJS + React Router-Projekt eingerichtet und im Chrome-Entwicklungstool unter Elementen angezeigt:

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

mit Styling und keine für class="wrapper":

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

Noch die <div class="container">Center Me</div> bleibt oben und horizontal zentriert, aber nicht vertikal.

Ich habe die Größe dieses div überprüft und es ist extrem kurz, nimmt aber die volle Breite der Browserseite ein.

Was könnte ich falsch machen? Wie kann ich mich zentrieren <div class="container">Center Me</div>? Ich habe sogar versucht, einzustellen 100% for width and height auf einer höheren Ebene, aber es funktioniert immer noch nicht.

Question 2

Gerade:

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

oder CSS:

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

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

Question 3

Hier ist ein Codebeispiel, das Ihre Seite im Grunde neu erstellt, aber ohne zu reagieren. Hoffe, das hilft und schieße weg, wenn du irgendwelche Fragen hast.

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>

Question 4

Ich wickle nur meine ein div mit Grid und hinzugefügt justify="center" attr.:

<Grid container spacing={2} justify="center"></Grid>

Question 5

Ja, um zu reagieren,

for wird zu htmlFor und class wird zu className usw.

Sehen Sie sich hier die vollständige Liste an, wie HTML-Attribute geändert werden:

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

Question 6

const App = () => {
  const styles = {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    height: '100vh',
  };

  return (
    <div style={styles}>
      <h2>Hello All</h2>
    </div>
  );
};

export default App;

Question 7

In React müssen Sie className verwenden, nicht class. className="wrapper