Centralizar div no meio da tela

Oi Denis, tudo bem?

Se voce quer usar o BST4 voce pode fazer uso das classes de flexbox dele.

https://getbootstrap.com/docs/4.0/utilities/flex/#align-items

Espero ter ajudado e bons estudos,

Abcs!

Sim eu tentei usar essas classes porem ela nao respeita o comando, poderia verificar se estou usando corretamente.

class App extends Component {
  render() {
    return (
      <div className="container align-self-center" id="container-home">
        <div className="border border-dark" id="div-home">
        <h1>teste</h1>
        <h1>teste</h1>
        <h1>teste</h1>
        <h1>teste</h1>
        </div>
      </div>
    );
  }
}

Ela continua no mesmo lugar

Oi Denis, beleza?

Tenta adicionar essas duas classes junto com a sua "align-self-center".

Explicando o que ela faz... A propriedade Flexbox do CSS precisa do JUSTIFY CONTENT para saber aonde ele vai alinhar verticalmente na tela.

Por padrão, o valor de justify-content é flex-start, o que faz com que a div fique no lado direito da tela.

Mudando para "center" ele centralizará o elemento na tela.

E mantenha a align-self para alinhar horizontalmente no meio da tela.

Me deixe saber se consigo te ajudar com algo. :)

<div className="d-flex justify-content-center"></div>

Agradeço a ajuda, Agora teve mudança no comportamento da div, porem ela não se centralizou no meio da tela, apenas no meio da row.

Deixei em vermelho para tentar explicar onde gostaria de colocar ela.

Se eu acrescentar um margin top 50% na div que esta o container seria uma boa pratica ?

https://ibb.co/iaPPj7

Codigo:

import React, { Component } from 'react';
export default class Teste extends Component {
    render() {
      return (
        <div className="container align-self-center d-flex justify-content-center" id="container-home">
          <div className="border border-dark" id="div-home">
          <h1>teste</h1>
          <h1>teste</h1>
          <h1>teste</h1>
          <h1>teste</h1>
          </div>
        </div>
      );
    }
  }

Entendi Denis.

O que acontece é que você está controlando todas as suas propriedades flex em um único elemento.

Tente o código abaixo, e coloque um Height 100vh ( caso só tem essa div filha na tela ). na class container.

Lembrando que a "align-self-center" é uma propriedade que deve ir nos elementos FILHOS e não nos pais.

Me deixe saber se consigo te ajudar em mais alguma coisa. o/

Segue um codepen com o exemplo funcionando: https://codepen.io/stroherpossa/pen/qYdjMw

Abs.

<div className="container d-flex justify-content-center" id="container-home">
  <div className="border border-dark align-self-center" id="div-home">
    <h1>teste</h1>
    <h1>teste</h1>
    <h1>teste</h1>
    <h1>teste</h1>
  </div>
</div>

Obrigado pela atenção, Essa é a parte que tenho duvida, Como utilizo o React ele renderiza dentro de uma div Root.

Ou seja tem um monte de div na tela do usuário. https://ibb.co/jxRjZ7

Como voce mesmo disse preciso usar o Height para aumentar o tamanho e assim ela ter onde descer para centralizar na Vertical.

Agora o Height não fara efeito na div-container por que o pai dela não tem tamanho, fazendo com que eu colocasse o Height também no seu pai div-main, e não fara efeito porque o pai da main não terá tamanho, e assim vai indo fazendo com que eu colocasse o Height até no HTML.

Estou muito confuso em relação a isso, devo colocar o Height em todos ?

Qual a forma correta de resolver isso ?

Agradeço de novo a atenção Willian

Utilize o height na div "container", adicionando uma class custom para isso.

Ai você pode colocar um height fixo, ou um height em "vh", % não funcionará, pois para usar % você precisa setar o height das divs hierarquicamente acima.

O Ideal é adicionar uma classe pra isso e controlar o height dela em um arquivo css custom.

Se você quer só esse bloco renderizado no meio, e o tamanho dela for a tela inteira. Use 100vh. ( Eu creio que seja isso que esteja querendo ).

Qualquer coisa estou por aqui. o/

Desculpe a demora para dar o feedback.

Muito obrigado pela explicação, cara funcionou perfeitamente e me ajudou a entender como funciona.

Vlw o/.

Se puder me manda um email, adoraria ter seu contato '-'

denyysdns@gmail.com

Opaa Denis, Fico MUITO feliz que consegui te ajudar.

Meu e-mail é wstroherpossa@gmail.com

Qualquer coisa estamos por aqui pra ajudar SEMPRE.

Forte abraço e tenha um ótimo final de semana. o/