Centralizar verticalmente com margin: auto 0

[JoaoCardoso 0]

Pessoal, tô com uma dúvida:

Tem algum problema em centralizar verticalmente com:

margin: auto 0;

?

Pergunto porque só vi nas minhas pesquisas pelo Google o pessoal falando para usar o line-height.

 

Usei hoje o margin: auto 0 e pude fazer um código mais genérico.

 

Era isso,

 

Att

[André do Vale 76]

Não há como centralizar verticalmente usando margens (superior e inferior) automáticas.

 

https://css-tricks.com/centering-css-complete-guide/

 

http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

[JoaoCardoso 0]

Bom dia André, eu fiz usando a seguinte estrutura:

<div style="display:flex; height: 400px; background-color: black;">
    <div style="margin: auto 0">
        <img style="width:100px;" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQhFekhUFpI5xcknToOZQspsUhLd7-K_ygC-n2Dhvyx5uStpccWmA"/>
    </div>
        
</div>

Tem algum problema em fazer assim? Vejo muito isso no bootstrap.

[André do Vale 76]

Não há problema em utilizar flex box. Entretanto, tem de ter ciência que ainda há necessidade de prefixos para navegadores.

 

Veja mais: http://davidwalsh.name/css-vertical-center-flexbox

[JoaoCardoso 0]

Certo André. Obrigado.