如何在此CodePen中對齊中心元素？

Question

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;
    }
}

Answer 1

通過執行以下操作，我能夠將您的元素居中：

.hero {
  margin: 0 auto;
  text-align: center;
  width: 50%;
  height: 447px;
  vertical-align: bottom;
}

似乎不想居中，因為您已指定width: auto