Centralizar div para login

[Charlie Fox]

Bom dia a todos

 

Estou com dificuldade em utilizar um template de pagina de login que achei na internet. Segue o codigo e como fica a pagina: http://codepen.io/T-P/pen/bpWqrr

Essas classes são do Framework MaterializeCss, que tem como objetivo deixar as paginas com Material Design do Google, gosto muito deste estilo, por isso estou tentando utiliza-lo, ao invés do Bootstrap.

O problema aqui é que o código está utilizando a tag <center>, e pelo que pesquisei, essa tag não é mais suportada pelo HTML5, toda a parte de estilização da página deve ser feita pelo CSS. Mas não encontro nenhuma maneira de fazer isso utilizando CSS.

 

Minha primeira tentativa foi colocar uma div utilizando as classes de grid do Framework, coloquei para ocupar 3 colunas, mas como o sistema de grid é de 12 colunas, ele nunca fica centralizado, porque é um numero ímpar, ou ele fica uma coluna pra direita ou uma para esquerda.  

 

Depois tentei fazer utilizando margin: 0 auto. Depois tentei left: 50%.

Mas a div não sai do lugar, tem algum jeito de centralizar tanto verticalmente quanto horizontalmente, sem fazer um monte de gambiarra?

obrigado e bom domingo.

 

[TulioBotinha]

Boa tarde amigo, para centralizar uma div (digamos que ela tenha 400x400px):

top:50%;
left:50%;
margin-left:-200px;
margin-top:-200px;

No caso do seu problema, eu substituiria o <center> com uma div com posicionamento absoluto e tamanho fixo e ai aplicaria este codigo.

[DiF]

@Charlie Fox Têm diversas maneiras de centralizar....  a mais usada é o margin: 0 auto mesmo.

Atualmente existe outro método chamado flex. que é o do seu exemplo. ele é bem recomendado!

Ou usar a gambiarra do amigo acima baseado no tamanho do seu elemento.

 

De fato o center é uma tag obsoleta. Não use.

 

[Charlie Fox]

@TulioBotinha @dif  Obrigado pela resposta

Eu vi o pessoal recomendando esse metodo utilizando flex.

Bom, eu criei uma id pro container e coloquei width pra ele, e quando vi, ele estava centralizado. Não sei exatamente o que aconteceu, pois como eu disse, peguei esse template e tentei adapta-lo no meu projeto. 

Vou tentar analisar pra ver o por quê disso ter acontecido, o bom é que funcionou rs  

[DiF]

@Charlie Fox Você pode combinar os atributos e elementos.. por exemplo:

DIV class="login"
    --DIV class="form"
           --FORM

E no CSS

dizer que o class login fica centralizado com margin: zero auto;

o class form  também margin zero auto com umk width definido...

e o form em si, você aplica um margin-left. 

 

é outra forma de resolver o problema...

 

Exemplo: https://jsfiddle.net/nuzkywqm/