center a div relative to another div

Question

so basically I want to create something like this:

The problem is that I don't know how to do the red cube centered to the blue one. For now I have this piece of code:

HTML

<div class="cards" id="cards">
     <div class="card 1">
        <div class="icon"><img src="#" alt=""></div>
        <h3 class="title"></h3>
        <p class="description"></p>
     </div>
     <div class="card 1">
        <div class="icon"><img src="#" alt=""></div>
        <h3 class="title"></h3>
        <p class="description"></p>
     </div>
     <div class="card 1">
      <div class="icon"><img src="#" alt=""></div>
      <h3 class="title"></h3>
      <p class="description"></p>
   </div>

CSS

.icon{
    background-color: red;
    width: 150px;
    height: 150px;
    border-radius: 20px;
}

.card{
    height: 500px;
    width: 350px;
    border-radius: 20px;
    background-color: rgb(56, 55, 55);
    -webkit-box-shadow: 3px 11px 40px 2px rgba(0,0,0,0.37); 
    box-shadow: 3px 11px 40px 2px rgba(0,0,0,0.37); 
}

where .icon is the red cube and .card the blue rectangle. Does anyone have any idea?