How can I center a `div` with 3 `.profilebox` elements on any screens? and make it responsive?

• **Big screens**: One row with my 3 elements   

• **laptop screens**: Two rows (2 elements on the first row, 1 element below)   

• **Tablet and mobile**: 3 rows with one element per row vertically align (centered)  

You can check what I want here: ![Schema](https://i.stack.imgur.com/DqPAz.png)

HTML: 

```
<div class="container" style="max-width: 1300px;">
   <div class="row">
     <div class="centerDiv">
       <div class="profilebox ">
         <div class="profileInfo">
             <h3 class="box-shadow">Errore Aethiopia dolorum amni</h3>
         </div>
       </div> 
     </div>
</div>

```

And I have 3 `div`s `.profilebox` rendering 3 boxes with my image + title.

CSS : 

```
.centerDiv {
  padding-bottom: 200px;
  padding-top: 100px;
  margin-right: 0 auto;
  margin-left: 0 auto;
}

.profilebox {
  width: 350;
  height: 210;
  cursor: pointer;
  display: inline-table;
  margin-bottom: 100px;
  background-image: url("");
  background-position: center center;
  background-size: cover;
  position: relative;
}

.profilebox .profileInfo {
  bottom: 0;
  height: 50px;
  left: 0;
  right: 0;
  margin: 0 auto;
  position: absolute;
  width: 88%;
}

```

With this code, my box is well designed. My **img** and **title** are in the right place. The only thing now is to make it centered in any situation.
I am a beginner in web development, some things may not be meaningful in my code right now. thanks a lot for your help.