CSS Vertical Centering With Absolute Position and Transform

<div class="carousel">  
  <img src="maria.jpg" alt="Maria de Almeida" />  
  <blockquote class="testimonial">  
    <p class="testimonial-text">  
      "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officia nesciunt aliquid ex atque quibusdam. Rerum  
      officia unde suscipit quo sunt hic illo fugit."  
    </p>  
    <p class="testimonial-author">Maria de Almeida</p>  
    <p class="testimonial-job">Senior Product Manager at EDP Comercial</p>  
  </blockquote>  
  <button class="btn btn--left">  
    <svg xmlns="http://www.w3.org/2000/svg" class="btn-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">  
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />  
    </svg>  
  </button>  
  <button class="btn btn--right">  
    <svg xmlns="http://www.w3.org/2000/svg" class="btn-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">  
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />  
    </svg>  
  </button>  
  <div class="dots">  
    <button class="dot dot--fill">&nbsp;</button>  
    <button class="dot">&nbsp;</button>  
    <button class="dot">&nbsp;</button>  
    <button class="dot">&nbsp;</button>  
  </div>  
</div>  

.btn {  
  background-color: **fff**{: #fff .hash};  
  border: none;  
  height: 40px;  
  width: 40px;  
  border-radius: 50%;  
  position: absolute;  
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);  
  cursor: pointer;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
}  

.btn--left {  
  /* In relation to PARENT ELEMENT */  
  left: 0;  
  top: 50%;  
  /* In relation to ELEMENT ITSELF */  
  transform: translate(-50%, -50%);  
}  

.btn--right {  
  right: 0;  
  top: 50%;  
  transform: translate(50%, -50%);  
}  

.btn-icon {  
  height: 24px;  
  width: 24px;  
  stroke: **087f5b**{: #087f5b .hash};  
}  

.dots {  
  position: absolute;  
  left: 50%;  
  bottom: 0;  
  transform: translate(-50%, 32px);  
  display: flex;  
  gap: 12px;  
}  

.dot {  
  height: 12px;  
  width: 12px;  
  background-color: **fff**{: #fff .hash};  
  border: 2px solid **087f5b**{: #087f5b .hash};  
  border-radius: 50%;  
  cursor: pointer;  
}  

.dot--fill {  
  background-color: **087f5b**{: #087f5b .hash};  
}