CodePen

HTML

            
              
<div class="box-wrap">
  <article>
    <h1>Boom</h1>
    <p>The important parts are setting the div "box-wrap" height and line-height to the same pixels. Then for article, set <span>display: inline-block; vertical-align:middle; line-height: normal;</span>. This only works when using inside of article.</p>
  </article>
</div>
            
          
!

CSS

            
              .box-wrap {
  height: 300px;
  line-height: 300px;
  width: 300px;
  text-align: center;
  background-color: #dedede;
  article {
    line-height: normal;
    display: inline-block;
    vertical-align: middle;
    span {
      font-weight: bold;
    }
  }  
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................