Why vertically centering needs a specified body height but not width?

Question

I'm trying to vertically center a div using only display flex. I know how to do this with other methods, but need some insight on why this does not work. (The container do get horisontally centered but, not vertically)....

<body>
<div class="container"></div>
</body>

body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; //works fine
    align-items: center; // 


}

.container {
    width: 80vw;
    height: 80vh;
    border-radius: 10%;
    padding: 0;
    margin: 0;
}

Does this answer your question? [Flexbox: center horizontally and vertically](https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically) — Awais, Apr 17 '20 at 09:42
The height must always be specified, but not the body's width? Perhaps the placing of content and items works differently... — Drax, Apr 17 '20 at 09:46

score 1 · Accepted Answer · answered Apr 17 '20 at 09:41

Yes, it gets centered, as you can see here:

body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center; 
  border: solid 1px green;

}

.container {
    width: 80vw;
    height: 80vh;
    border-radius: 10%;
    padding: 0;
    margin: 0;
    border: solid 1px red;
}

<div class="container"></div>

But probably what you want is this

body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center; 
  border: solid 1px green;
  height: 100%;
}

html {
  height: 100%;
}

.container {
    width: 80vw;
    height: 80vh;
    border-radius: 10%;
    padding: 0;
    margin: 0;
    border: solid 1px red;
}

<div class="container"></div>

Why vertically centering needs a specified body height but not width?

1 Answers1