Vertically centering a flex element that is a child of `flex-grow: 1`?

Question

I basically have a page that has a header, some main content, and a footer. I want the footer to be sticked at the bottom and the content should be vertically + horizontally centered. Here is what I have:

body {
  margin: 0;
}

#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  padding: 2em 0;
  background: cyan;
}

main {
  flex-grow: 1;
  background: turquoise;
}

main div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

footer {
  padding: 2em 0;
  background: violet;
}

<div id="wrapper">
  <header></header>

  <main>
    <div>
      This should be centered horizontally and vertically within the turquoise box
    </div>
  </main>

  <footer></footer>
</div>

As you can see, the text inside the main content isn't being vertically centered. For some reason, the main div isn't taking up the full height of main even though I gave it a height: 100%;. Does anyone know what is wrong with this code?

So footer content will be center? – Momin Apr 16 '18 at 05:09 — Momin, Apr 16 '18 at 05:09

score 1 · Accepted Answer · answered Apr 16 '18 at 05:03

1

Try moving your div flex properties to the main parent:

main {
  flex-grow: 1;
  background: turquoise;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

main div { }

or, another approach that might be more suitable for your needs:

main {
  flex-grow: 1;
  background: turquoise;
  display: flex;
}

main div { 
  margin: auto; 
}

answered Apr 16 '18 at 05:03

ggorlen

44,755
7
76
106

Yes, the second approach works for what I needed to do – thanks. – inhwrbp Apr 16 '18 at 11:13

Momin · Answer 2 · 2018-04-16T05:29:16.297

Try this following code snippet

*{
  margin: 0;
}

*, *:before, *:after {
  box-sizing: inherit;
}

#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  height:60px;
  background: cyan;
}

main {
  flex-grow: 1;
  height:100%;
  background: turquoise;
  justify-content:center;
  align-items:center;
  display:flex;
}

main div {
  margin:auto;
}

footer {
  height:60px;
  background: violet;
  position:fixed;
  left:0;
  bottom:0;
  width:100%;
  text-align:center;
}

footer p{
  display:flex;
  width:100%;
  height:100%;
  flex-direction:column;
justify-content:center;
align-items:center;
}

<div id="wrapper">
  <header></header>

  <main>
    <div>
     Contrary to popular belief, Lorem Ipsum is not simply random text. 
    </div>
  </main>

  <footer>
    <p>All rights reserved by Author; 2018 - 2010</p>
  </footer>
</div>

Vertically centering a flex element that is a child of `flex-grow: 1`?

2 Answers2