web-dev-qa-db-fra.com

Comment centrer verticalement et horizontalement un composant en React?

Comment puis-je obtenir un centrage absolu avec CSS-in-JS? Lorsque j'utilise le code suivant, mon composant se déplace sur l'écran. Je suppose que la traduction est appliquée plusieurs fois au lieu d'une seule. Que se passe-t-il et comment puis-je le réparer sans utiliser de bibliothèque?

  render() {
      return (<ComponentASD 
        style={{
        position: 'absolute', left: '50%', top: '50%',
        transform: 'translate(-50%, -50%)'
      }} />);
    }
javascriptcssreactjs
3
James L.

Votre exemple de code fonctionne bien:

ReactDOM.render(
  <div
    style={{
        position: 'absolute', left: '50%', top: '50%',
        transform: 'translate(-50%, -50%)'
    }}
    >
    Hello, world!
  </div>,
  document.getElementById('root')
);

https://codepen.io/anon/pen/JaLLmX

Cela doit faire quelque chose avec votre mise en page.

8
Marcel

Une autre option consiste à utiliser la boîte flexible.

<div style={{
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
}}>
    Hello world
</div>
14
erikryanmoore

Merci pour les tests + commentaires! Le style a finalement été bien, le problème était en quelque sorte causé par la disposition de ComponentASD, qui est en fait CircularProgress de MUI https://material-ui.com/api/circular-progress/#demos

J'ai enveloppé ce composant dans un div à l'intérieur du rendu et appliqué le style à la div, ce qui a résolu le problème (le maintient immobile et correctement aligné).

1
James L.