Центральная кнопка внутри бабушки и дедушки по центру

Question

Название звучит запутанно, но трудно сказать!

Как бы я выровнял по центру a внутри .feature-inner div?Всякий раз, когда я использую обычный 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

Попробуйте:

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

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

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