Can't center title - horizontally + vertically

<section class="hero">
        <div class="container">
          <div class="hero__content">
            <div class="hero__heading">
              <h1 class="heading color--primary">
                Residential &amp;
                Commercial
              </h1>
            </div>
            <div class="hero__sub-heading">
              <p class="sub-heading">appliance <span class="color--primary">repair</span></p>
            </div>
            <div class="hero__cta">
              <img src="./imgs/Scroll_Down_Arrow.svg" alt="">
            </div>
          </div>
        </div>
      </section>

.hero
{
    width: 100%;
    height: calc(100vh - 125.594px);
    background-color: $color-grey;
    overflow: hidden;
}

.hero__content
{
    margin-top: 80px;

    .contact-list__link
    {
        color: $color-primary;
    }
}

.hero__heading
{
}

.hero__sub-heading
{
    margin-top: -30px;
    
    .sub-heading
    {
        font-size: $font-size-xx-large;
        text-transform: capitalize;
        color: $color-black;
    }
}