.arrow-circle {
  position: relative;
  width: 400px;   /* adjust circle size */
  height: 400px;
  margin: 50px auto; /* center on page */
}

.arrow {
  position: absolute;
  transform: translate(-50%, -50%);
}

/* Position arrows */
.arrow.up    { top: 0;    left: 50%; }
.arrow.down  { bottom: 0; left: 50%; }
.arrow.left  { left: 0;   top: 50%; }
.arrow.right { right: 0;  top: 50%; }

/* Center image */
.center-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}