Center div always to the center vertically

Question

Center div always to the center vertically

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

Good, I'm trying to center a div vertically and horizontally. Horizontally I have no problem, I use FlexBox and it always remains at the center, but vertically it gets complicated and I do not get it.

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

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

}

What's wrong with me? having the direction in row the align-items: center would have to center it vertically in the parent container, which is the body. but he does not

css flexbox

asked by Rodrypaladin 05.06.2017 в 15:12

source

2 answers

Menu nav single page Error doing Left Join. The identifier consisting of several parts ... could not be linked

score 1 · Answer 1

I have found a "solution" answer if you see that it is the most successful.

I had already tried to put a height: 100% to the body but it did not work, so I tried to put it to the html too and it worked ..

I added to what I already had

html, body {
    height: 100%;
}

score 1 · Answer 2

I always solve it with a behavior in tables ..

<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>