can I vertically center in body using flex with 100% height instead of 100vh?

Question

I would like to have the div centered in the body. It works if I change 100% to 100vh. I would like to avoid using 100vh as I want these rules to be usable within a container. Why does 100% expand the height for the background but not for the purposes of vertically centering the div?

head + * {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #cb9800;
  height: 100%;
}

.content {
  font-family: Comic Sans MS;
  font-size: 75%;
}

<div class="content">This is vertically centered if I change 100% to 100vh</div>

`head + *` ? Rather odd. 100% of what? The parent height needs to be defined, therefore `html {height: 100%}` — VXp, May 22 '18 at 06:02

score 1 · Accepted Answer · answered May 22 '18 at 06:00

1

html, head + * {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #cb9800;
  height: 100%;
}

.content {
  font-family: Comic Sans MS;
  font-size: 75%;
}

<div class="content">This is vertically centered if I change 100% to 100vh</div>

    height: 100%;

You need to add height 100% to HTML tag also.

answered May 22 '18 at 06:00

Silu K

238
2
13

Thanks. I see now, the body tag's background fills the page regardless of its height. – Benjamin Atkin May 22 '18 at 06:33

score 0 · Answer 2 · answered May 22 '18 at 06:01

0

add

html, body{
    height:100%;
    }

answered May 22 '18 at 06:01

Yosef Tukachinsky

5,570
1
13
29

can I vertically center in body using flex with 100% height instead of 100vh?

2 Answers2