CodePen

HTML

            
              
<div class="box-wrap">
  <div class="box-inner">
    <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>. </p>
  </div>
</div>

<div class="table-wrap">
 <h1>Boom</h1>
 <p>This demo relies on just the parent div being set to "display: table-cell; vertical-align: middle;"</p>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body {
  font-family: sans-serif;
}
.box-wrap {
  height: 300px;
  line-height: 300px;
  width: 300px;
  text-align: center;
  background-color: #dedede;
  display: inline-block;
  float: left;
  box-sizing: border-box;
  padding: 10px;
  .box-inner {
    line-height: normal;
    display: inline-block;
    vertical-align: middle;
    span {
      font-weight: bold;
    }
  }  
}
.table-wrap {
  display: table-cell;
  vertical-align: middle;
  background: #333;
  height: 300px;
  text-align: center;
  width: 300px;
  box-sizing: border-box;
  padding: 10px;
  p {
    margin: 0 auto;
    color: white;
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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