html - 如何对齐此 CodePen 中的中心元素？

Question

http://codepen.io/leongaban/pen/ACJta
^ 已更新(我永远无法让 SASS 在 Codepen 中正常工作)

无法与上面我的元素居中对齐。使用 SASS，我想避免使用 position hacks

<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