祖父母中心对齐的Flex div内的中心按钮

Question

标题听起来令人困惑，但很难说出来！

如何将a div内的.feature-inner居中对齐？每当我使用通常的margin: 0 auto; display: block;时，它只会将链接拉伸为div的整个宽度。

这是我的HTML：

#feature {
  height: 600px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top,
.bottom {
  text-align: center;
  font-size: 30px;
  font-family: $titlefont;
  font-size: 4rem;
  line-height: 6rem;
  letter-spacing: 2px;
}

.top {
  font-weight: 500;
}

.bottom {
  font-weight: 100;
}

a {
  background-color: $brandGreen;
  padding: 15px 50px;
  border-radius: 5px;
  text-transform: uppercase;
  font-family: $font;
  text-shadow: 0px 1px 1px #717171;
}

<div id="feature">
  <div class="container">
    <div class="feature-inner">
      <h1 class="top">My Title</h1>
      <h1 class="bottom">My Sub title</h1>
      <a href="">My button</a>
    </div>
  </div>
</div>

Answer 1

尝试：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="test">My Text</div>

#feature {
  height: 600px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top,
.bottom {
  text-align: center;
  font-size: 30px;
  font-family: $titlefont;
  font-size: 4rem;
  line-height: 6rem;
  letter-spacing: 2px;
}

.top {
  font-weight: 500;
}

.bottom {
  font-weight: 100;
}

a {
  display: block;
  text-align: center; //center the button text vertically
  width: 100px; //set the width of button
  height: 30px; //set the height of button
  line-height: 30px; //when set same as height makes the button text centered horizontally
  margin: 0 auto; //center the whole button
  background-color: $brandGreen;
  padding: 0;
  border-radius: 5px;
  text-transform: uppercase;
  font-family: $font;
  text-shadow: 0px 1px 1px #717171;
}

https://jsbin.com/zehogubaja/2/edit?html,css,output