Wie zentriere ich eine Komponente in der Material-Benutzeroberfläche und mache sie reaktionsschnell?

75

Ich verstehe das React Material-UI-Rastersystem nicht ganz. Wenn ich eine Formularkomponente für die Anmeldung verwenden möchte, wie kann ich sie auf allen Geräten (Mobilgeräte und Desktops) am einfachsten auf dem Bildschirm zentrieren?

reactjs mobile login material-ui desktop zorro
quelle
Nur um sicher zu gehen, sprechen Sie über diese Bibliothek - material-ui.com richtig?
Swapnil
Ja, ich spreche über die gleiche Bibliothek
Zorro

Antworten:

142

Da werden Sie dies in einer Anmeldeseite verwenden. Hier ist ein Code, den ich auf einer Anmeldeseite mit der Material-Benutzeroberfläche verwendet habe

<Grid
  container
  spacing={0}
  direction="column"
  alignItems="center"
  justify="center"
  style={{ minHeight: '100vh' }}
>

  <Grid item xs={3}>
    <LoginForm />
  </Grid>   

</Grid>

Dadurch wird dieses Anmeldeformular in der Mitte des Bildschirms angezeigt.

Trotzdem unterstützt der IE das Material-UI-Raster nicht und Sie werden einige falsch platzierte Inhalte im IE sehen.

Hoffe das wird dir helfen.

Nadun
quelle
2
Eine kleine Korrektur, für den Anwendungsfall des Op sollte die Flex-Richtung row >>> direction = "row" sein
Peter Moses
Normalerweise wird die Komponente durch alignItems = center und adjust = center in die Mitte der Seite verschoben, dies ist jedoch nicht der Fall. Das Hinzufügen des Stils = {{minHeight: '100vh'}} erledigt den Job, fügt jedoch eine Bildlaufleiste auf der Seite hinzu. Wie wird es behoben?
Schlank
36

Eine weitere Option ist:

<Grid container justify = "center">
  <Your centered component/>
</Grid>
Max
quelle
11

Die @ Nadun-Version hat bei mir nicht funktioniert, die Größe hat nicht gut funktioniert. Das Entfernen direction="column"oder Ändern in rowhilft beim Erstellen vertikaler Anmeldeformulare mit reaktionsschneller Größe.

<Grid
  container
  spacing={0}
  alignItems="center"
  justify="center"
  style={{ minHeight: "100vh" }}
>
  <Grid item xs={6}></Grid>
</Grid>;
Onur Yıldırım
quelle
10

Hier ist eine weitere Option ohne Raster:

<div
    style={{
        position: 'absolute', 
        left: '50%', 
        top: '50%',
        transform: 'translate(-50%, -50%)'
    }}
>
    <YourComponent/>
</div>
Jöcker
quelle
Dies hat für mich sehr gut funktioniert, um eine Material-UI <Fab> -Komponente zu zentrieren. Als Add-On ist bei der Übersetzungsmethode der erste Parameter die horizontale und der zweite die vertikale Übersetzung.
Michael Jay
4

Sie können dies mit der Box-Komponente tun:

import Box from "@material-ui/core/Box";

...

<Box
  display="flex"
  justifyContent="center"
  alignItems="center"
  minHeight="100vh"
>
  <YourComponent/>
</Box>
Killian Huyghe
quelle
3

Alles, was Sie tun müssen, ist, Ihren Inhalt in ein Rastercontainer-Tag einzuschließen, den Abstand anzugeben und dann den tatsächlichen Inhalt in ein Rasterelement-Tag einzuschließen.

 <Grid container spacing={24}>
    <Grid item xs={8}>
      <leftHeaderContent/>
    </Grid>

    <Grid item xs={3}>
      <rightHeaderContent/>
    </Grid>
  </Grid>

Außerdem habe ich viel mit dem Materialraster zu kämpfen. Ich schlage vor, dass Sie die Flexbox auschecken, die automatisch in CSS integriert ist, und dass Sie keine zusätzlichen Pakete benötigen, um sie zu verwenden. Es ist sehr leicht zu lernen.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Gavin Thomas
quelle
Danke, also habe ich 3 Gitterelemente verwendet und die Komponente in die Mitte gelegt, um sie zu zentrieren?
Zorro