Image encadrer par 4 liens

bonjour les gens !

je suis sur le point de résoudre mon problème seul mais quelque chose me bloque et c'est très probablement quelque chose de tout nul en plus ...

je cherche a centrer mes liens sur chaque bord de mon écran (un lien a gauche un autre a droit et un dernier en bas)

mais pas moyen de centrer celui du bas, alors que c’était celui que je pensais le plus simple ...

voila du code sous bootstrap 4:

    <div class="row">
      <div class="col-lg-12 masterBox">
        <div class="Box slaveBox">
          <span class="side_label_left">
            <a href="#">
              <p>Websites</p>
            </a>
          </span>
          <span class="side_label_right">
            <a href="#">
              <p>Projects</p>
            </a>
          </span>
          <span class="side_label_bottom">
            <a href="#">
              <p>Skills</p>
            </a>
          </span>
        </div>
      </div>
    </div>

.masterBox {
  display: flex;
  min-height: 300px;
}
.slaveBox {
  margin: auto;
}
.Box {
  background-color: rgba(0, 0, 0, 0.5);
  margin-top: 50px;
  box-shadow: 8px 8px 12px #aaa;
  width: 1300px;
  height: 760px;
}
.side_label_left {
    position: fixed;
    color: #fff;
    height: 100%;
    top: 0;
    left: 15px;
    letter-spacing: 1em;
}
.side_label_left p {
    position: absolute;
    top: 50%;
    transform: rotate(-90deg) translateX(-50%);
    transform-origin: left top;
}

.side_label_right {
    position: fixed;
    color: #fff;
    height: 100%;
    top: 0;
    right: 15px;
    letter-spacing: 1em;
}
.side_label_right p {
    position: absolute;
    top: 50%;
    transform: rotate(270deg) scale(-1) translateX(-50%);
    transform-origin: left top;
}

.side_label_bottom {
  position: fixed;
  color: #fff;
  height: 100%;
  top: 0;
  bottom: 15px;
  letter-spacing: 1em;
}
.side_label_bottom p {
  position: absolute;
  top: 97%;
  left: 70%;
}

si au passage vous avez des idées d'optimisation je suis preneur.
merci.