Как выровнять центральные элементы в этом CodePen?

http://codepen.io/leongaban/pen/ACJta
^ Обновлено (я никогда не могу заставить SASS работать прямо в Codepen)

Нельзя выровнять средние мои элементы выше. Использование SASS, я хочу, чтобы избежать использования position хаков

<main>
  <div class="gradient">
    <div class="hero">
      <img src="http://placehold.it/350x150" alt=""/>
    </div>
  </div>

  <section class="tagline">
    <h1>Hi there Lorem Ipsum <em>My name is Bob</em></h1>
    <button>Learn More</button>
  </section>
</main>

body {
  font-family:Arial
}

.hero {
    display: table-cell;
    //position: relative;
    margin: 0 auto;
    // top: 42%;
    // left: 10%;
    text-align: center;
    width: auto;
    height: 447px;
    vertical-align: bottom;

    img {
        width: 300px;
        height: 280px;
        text-align: center;
        vertical-align: bottom;
        border:0;
    }
}

.tagline {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 300px;
    text-align: center;
    color: blue;
    background: gray;
    z-index: 2;

    h1 {
        margin: 0 auto;
        padding-top: 5%;
        width: 80%;
        font-size: 42px;
        text-align: center;
    }

    em {
        font-weight: bold;
    }

    button {
        margin-top: 25px;
        padding: 10px 20px;
        font-family: Arial;
        font-size: em(21);
        color: white;
        border: 0;
        background: orange;
    }
}