Centrar div siempre al centro verticalmente

Question

Buenas, estoy intentando centrar un div vertical y horizontalmente. Horizontalmente no tengo problema, uso FlexBox y siempre queda al centro, pero verticalmente ya se me complica y no lo consigo.

body {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

.container {
    width: 200px;
    height: 200px;
    background-color: black;

}

Qué se me pasa ?? teniendo el direction en row el align-items: center tendría que centrarlo verticalmente en el contenedor padre, que es el body. pero no lo hace

Recuerda que body es distinto de la pantalla. Ya que el body puede ser mas alto que la pantalla y tener que utilizar el scroll para navegar en ella, o bien mas pequeña. Espero que eso aclare un poco por donde va la cosa :) — Jose Miguel Sepulveda, Jun 05 '17 at 13:14
Si quieres algunas opciones sobre como posicionar horizontal y verticalmente un div en la página puedes consultar los ejemplos en esta pregunta: https://es.stackoverflow.com/questions/37930/cual-es-la-diferencia-entre-position-relative-position-absolute-y-position — Francisco Romero, Jun 05 '17 at 14:29

score 1 · Answer 1 · answered Jan 27 '19 at 09:41

Efectivamente @Rodry eso lo soluciona. Lo que sucede es que tanto HTML como BODY por defecto tienen height: auto;, o sea, que crecen en función de su contenido.

El scroll de la ventana corresponde al elemento :root dentro del cual están aquellos dos.

Otra cosa que puedes hacer si necesitases añadir más elementos que se viesen al hacer scroll pero manteniendo tu .container centrado respecto de la ventana, es dejar la altura por defecto de HTML y BODY y en cualquier sección de tu página aplicar el 100% de la altura del viewport de esta manera:

section {
    height: 100vh;
}

score 1 · Answer 2 · answered Jun 05 '17 at 13:19

He encontrado una "solución" responder si veis que es la más acertada.

Ya había probado a ponerle un height: 100% al body pero no funcionaba, así que probé a ponérselo también al html y funcionó..

Añadí a lo que ya tenía

html, body {
    height: 100%;
}

score 1 · Answer 3 · answered Jun 05 '17 at 13:25

Yo siempre lo soluciono con un comportamiento en tablas..

<style>
    .page{
        height: 600px;
    }

    .container-1{
        display: table;
        width: 100%;
        height: 100%;
    }

    .container-2{
        display: table-cell;
        vertical-align: middle;
    }

</style>
<div class="page">
    <section class="container-1">
        <section class="container-2">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam quibusdam ea, neque illum quod adipisci ipsam ipsa ut magnam fuga similique cum eaque alias, culpa id sed hic, vero aut!
        </section>
    </section>
</div>

Centrar div siempre al centro verticalmente

3 Answers3