要素の基準点を中心にして中央配置

transform: translate(-50%, -50%);

を使うと楽。

html,
body {
  height: 100%;
}
.area {
    position: relative;
    width:100%;
    height:100%;
    background-color: #006d6f;
}
.area .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff;
}
.area .triangle {
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background:
      linear-gradient(to bottom left, transparent 50%, #006d6f 53%) no-repeat top/100% 50%,
      linear-gradient(to top left, transparent 50%, #006d6f 53%) no-repeat bottom/100% 50%;
}

See the Pen JmqvWp by horikeso (@horikeso) on CodePen.