CSS Alinhar div no centro da tela

Impts · 23 de novembro de 2021

Estou com dificuldade para alinhar a div row no centro da tela, uma opção que pesquisei como "flexbox" de alinhamento moderno, não está funcionando.

<div class="row">
  <div class="column">
    <div class="card">
      <h3>Card 1</h3>
      <p>Some text</p>
      <p>Some text</p>
      <p>Some text</p>
      <p>Some text</p>
      <p>Some text</p>
      <p>Some text</p>
    </div>
  </div>
  
  <div class="column">
    <div class="card">
      <h3>Card 2</h3>
      <p>Some text</p>
      <p>Some text</p>
      <p>Some text</p>
      <p>Some text</p>
      <p>Some text</p>
      <p>Some text</p>
    </div>
  </div>

body {background-color: #F5F5F5;}


  
  /* Float four columns side by side */
  .column {
    float: center;
    width: 15%;
    padding: 0px;
    
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  }
  
  /* Remove extra left and right margins, due to padding */
  .row {
    display: flex;
    align-items: center;
    justify-content: center;
}
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
    
  }
  
  /* Responsive columns */
  @media screen and (max-width: 600px) {
    .column {
      width: 100%;
      display: block;
      margin-bottom: 20px;
      
    }
  }
  
  /* Style the counter cards */
  .card {
   /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); */
    padding: 50px;
    text-align: center;
    background-color: #ffffff;

  }

thefill · 23 de novembro de 2021

Olá @Impts

Eu vi aqui que no código que você enviou está faltando um fechamento da div row.

Nessa parte:

2 horas atrás, Impts disse:

<div class="row">
  <div class="column">
    <div class="card">
      <h3>Card 1</h3>
      <p>Some text</p>
      <p>Some text</p>
      <p>Some text</p>
      <p>Some text</p>
      <p>Some text</p>
      <p>Some text</p>
    </div>
  </div>
  
  <div class="column">
    <div class="card">
      <h3>Card 2</h3>
      <p>Some text</p>
      <p>Some text</p>
      <p>Some text</p>
      <p>Some text</p>
      <p>Some text</p>
      <p>Some text</p>
    </div>
  </div>

Tenta ver ai e depois me diz se deu certo

Impts · 23 de novembro de 2021

@thefill Não deu certo, fechei o que faltava mesmo, e nada...

thefill · 24 de novembro de 2021

Oi, então!

Você importou a sua folha de estilos CSS na página HTML?

Era para ficar assim:

<head>
  	...
  	<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

--- Edit ---

Eu tentei ver como seria esse seu código aqui na minha máquina e ficou assim:

Protótipo

Dá uma olhada ai!

Impts · 24 de novembro de 2021

@thefill Então, ele esta assim, o problema é que não fica no meio da tela, fica no meio no topo e não no meio do meio

thefill · 24 de novembro de 2021

@Impts Ah, entendi!

Pra isso adiciona essas duas linha na classe row do seu CSS:

width: 100%;
min-height: 100%;

Com elas é como se pedíssemos para que a div row tenha um tamanho(width) de 100% e uma largura(height) minima de 100% também, pegando assim todo o espaço da nossa tela.