Reaccionar - Centre un componente horizontal y verticalmente

En este tutorial, aprenderemos cómo centrar un componente horizontal y verticalmente en React usando ejemplos.

Considere que tenemos el siguiente componente en nuestra aplicación React:

import React from 'react';

function Home(){
    return (
        <div className="center">
          <h1>Home Component</h1>
        </div>
    )
}

export default Home;

Para centrar un componente horizontal y verticalmente en React, agregue el display:flex, justify-content: center y align-items: center a la clase CSS del componente de reacción.

'justify-content:center' centra la imagen horizontalmente.

'align-items: center' centra la imagen verticalmente.

Aquí un ejemplo:

import React from 'react';

function Home(){
    return (
        <div className="center">
           <h1>Home Component</h1>
        </div>
    )
}

export default Home;
.center{
    display: flex;
    justify-content: center;
    align-items: center;
}

o podemos agregarlo en línea usando el style objeto en React.

import React from 'react';

function Home(){
    return (
        <div style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center'
        }}>
           <h1>Home Component</h1>
        </div>
    )
}

export default Home;
Índice
  1. Centrado por posición absoluta
  2. Creación del componente central

Centrado por posición absoluta

Podemos usar el posicionamiento absoluto en react.js para centrar el componente horizontal y verticalmente.

Aquí un ejemplo:

import React from 'react';

function Home(){
    return (
        <div style={{
               position: 'absolute',
               left: '50%',
               top: '50%',
               transform: 'translate(-50%, -50%)'
        }}>
          Home Component
        </div>
    )
}

export default Home;
  1. Aquí hemos añadido position:absolute al elemento div del componente, de modo que el elemento salga del flujo normal del documento y se posicione en su elemento principal relativo (por ejemplo, cuerpo principal o componente).

  2. los left:50% mueve el elemento un 50% de su posición.

  3. los top:50% mueve el elemento un 50% hacia abajo desde su posición.

  4. los translate(-50%, -50%) mueve el elemento 50% hacia arriba, 50% hacia la izquierda de su posición.

Creación del componente central

También podemos crear un componente reutilizable central en React, de modo que podamos reutilizarlo en nuestra aplicación en lugar de agregar los estilos al componente cada vez.

Ejemplo:

import React from 'react';

function Center(props){
    return (
        <div style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
        }}>
           {props.children}
        </div>
    )
}

export default Center;

Usando el componente Centro:

import React from 'react';
import Center from './center.js'

function Home(){
    return (
        <div>
           <Center>
             <h1>Home Component</h1>
           </Center>
        </div>
    )
}

export default Home;

Si quieres conocer otros artículos parecidos a Reaccionar - Centre un componente horizontal y verticalmente puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas