CSS - Center a child element horizontally and vertically within parent

Question

// notice the &_left, &_right are using the following properties:
//thus make the child element center X,Y
display: flex;
justify-content: center;
align-items: center;


.result_arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: transparent;  
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: center;  
  align-items: center; 
  z-index: 2;  
  &_left,
  &_right {
      // background-image: url(/static/images/vpm/swipe-right.svg);
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      cursor: pointer;
      width: 50px;
      height: 50px;
      font-size: 24px;
      border: none;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 4px 15px 0 rgba(0,0,0,.25);
  }
  &_left {
      left: 0;
  }
  &_right {
      right: 0;
  }
}