悬停时，如何将卡片带到div的中心（水平）

Question

我试图在悬停时将卡水平移动到中心，并且我希望它能移动时将屏幕滚动到卡的中心。实现此目标的最佳方法是什么？ 这是html，我使用的是scss，所以我也做了jsfiddle。

<div class="geraldo">
  <div class="cards">
    <div class="card">
      <img src="https://placeimg.com/220/320/any" class="capa">
      <h5 id="titulo">title</h5>
      <p id="autor">Author</p>
    </div>
    <div class="card">
      <img src="https://placeimg.com/220/320/any" class="capa">
      <h5 id="titulo">title</h5>
      <p id="autor">Author</p>
    </div>
    <div class="card">
      <img src="https://placeimg.com/220/320/any" class="capa">
      <h5 id="titulo">title</h5>
      <p id="autor">Author</p>
    </div>
    <div class="card">
      <img src="https://placeimg.com/220/320/any" class="capa">
      <h5 id="titulo">title</h5>
      <p id="autor">Author</p>
    </div>
  </div>
</div>

Jsfiddle：https://jsfiddle.net/dspywvke/