ReactJS + React Router: ¿Cómo centrar div?

Preguntas HTML
⏰ 3 minutos de lectura

Actualmente tengo un proyecto ReactJS + React Router configurado y en la herramienta de desarrollo de Chrome debajo de los elementos que se muestran:

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

con estilismo y ninguno para class="wrapper":

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

Sin embargo, el <div class="container">Center Me</div> se mantiene en la parte superior y centrado horizontalmente pero no verticalmente.

Revisé el tamaño de ese div y es extremadamente corto pero ocupa todo el ancho de la página del navegador.

¿Qué podría estar haciendo mal? como puedo centrarme <div class="container">Center Me</div>? Incluso traté de establecer 100% for width and height en un nivel superior, pero todavía no funciona.

  • El elemento que alinee dentro debe ser una etiqueta como

    . Necesitará un estilo en Html, Body para indicar que desea que la altura mínima y el ancho mínimo sean 100vh (vista-altura) y 100vw (vista-ancho).

    – Victoria

    8 de febrero de 2017 a las 23:52

  • cada padre de .container necesidades height: 100%; también

    –Michael Coker

    8 de febrero de 2017 a las 23:53

  • @Win, entonces, ¿dónde exactamente en el árbol debo agregar la altura y el ancho?

    – Joko

    9 de febrero de 2017 a las 0:19

  • @MichaelCoker Agregado a todos los padres pero sigue siendo el mismo…

    – Joko

    9 de febrero de 2017 a las 0:20

  • Asegúrese de incluir: – html, body { min-height: 100vh; ancho mínimo: 100vw; }

    – Victoria

    9 de febrero de 2017 a las 0:27

Avatar de usuario de Trọng Nguyễn Công
Trọng Nguyễn Công

Sólo:

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

o CSS: 

.centered {
  height: 100vh; /* Magic here */
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="centered">
  <h1> I am centered </h1>
</div>

Avatar de usuario de Win
Victoria

Aquí hay un ejemplo de código que básicamente recrea su página pero sin reaccionar. Espero que esto ayude y dispare si tiene alguna pregunta.

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>

  • Antes de aceptar la respuesta y votar a favor, diga si tengo otra <div> o <p>, ¿cómo puedo agregarlo a la siguiente línea y centrarlo también? Lo acabo de agregar después <div>Center Me</div> y está en la misma línea.

    – Joko

    10 de febrero de 2017 a las 22:40

solo envuelvo mi div con Grid y agregado justify="center" attr.:

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

Sí, para reaccionar,

for se convierte en htmlFor, y class se convierte en className, etc.

vea la lista completa de cómo se cambian los atributos HTML aquí:

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

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

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

export default App;

avatar de usuario de matthew
mateo

En React, debe usar className, no class. className="wrapper

¿Ha sido útil esta solución?