Search code examples
htmlcssvertical-alignment

Vertical Align with table-cell Not Working

I'm trying to center my header element inside its parent element, but for some reason the display:table-cell method doesn't seem to work. I'm using Basscss as a CSS framework, not sure if this has anything to do with it...

body, html {
  height: 100%;
}

.hero {
  display: table;
  width: 100%;
  height: 90%;

  header {
    display: table-cell;
    vertical-align: middle;
  }
}

I've set up a CodePen over here. For some reason, the header just won't center itself vertically.

Any help is appreciated. Thanks in advance!

Solution

  • It is because your <header> needs to have his direct parent element with a display: table.

    In your CodePen, .clearfix and .container are on top of <header>. Also .sm-col has a float:left; property

    See my edited CodePen