Centralize elements using margin

The best thing to do in this case, to display a catalog (a list of any items) is to use the default HTML list.

It stays semantically correct, makes it easy for web-reading tools for the visually impaired, makes it easy to navigate the page using only the keyboard, and helps google index your page content to improve the result of your pages on search sites in general (principles of SEO).

Here's an example of how you can do this.

* {
  box-sizing: border-box
}
.anime-item {
  width: 140px;
  height: 280px;
  background-color: red;
  box-shadow: 2px 2px 5px rgba(31, 31, 31, .8);
}
ul.catalogo {
  list-style: none;
  padding: 0px;
  text-align: center;
}
ul.catalogo > li {
  display: inline-block;
  margin: 10px 15px;
}

<ul class='catalogo'>
  <li class='anime-item'>
    <a href="/anime/1/">
      <img class="img-anime-thumb" src="" />
      <div class="anime-caption">Nome</div>
    </a>
  </li>

  <li class='anime-item'>
    <a href="/anime/1/">
      <img class="img-anime-thumb" src="" />
      <div class="anime-caption">Nome</div>
    </a>
  </li>

  <li class='anime-item'>
    <a href="/anime/1/">
      <img class="img-anime-thumb" src="" />
      <div class="anime-caption">Nome</div>
    </a>
  </li>

  <li class='anime-item'>
    <a href="/anime/1/">
      <img class="img-anime-thumb" src="" />
      <div class="anime-caption">Nome</div>
    </a>
  </li>

  <li class='anime-item'>
    <a href="/anime/1/">
      <img class="img-anime-thumb" src="" />
      <div class="anime-caption">Nome</div>
    </a>
  </li>
</ul>

I hope I have helped.

Paulo, I have 2 solutions for you:

1st Center items:

First we will use li for each item in the example, it is more semantic and also easier because we will have to add the attr text-align center to ul.

Ex:

ul {
  display: block;
  text-align: center;
}
li {
  background-color: rgb(201, 225, 222);
  display: inline-block;
  height: 180px;
  width: 120px;
}

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>

Explanation: This only means that the elements are aligned in half.

2º Centralizing and generating space between items:

For this example I will increment the example above. You'll use li to delimit the amount of items per line and center the thumbs within that container.

Ex:

/*resets*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


ul {
  display: block;
  position: relative;
  text-align: center;
  width: 100%;
}
li {
  background-color: white;
  display: inline-block;
  min-width: 24.5%;
}
img {
  background-color: rgb(201, 225, 222);
  height: 180px;
  margin: 10px auto;
  width: 120px;
}

<ul>
  <li>
    <img src="#" alt="item 1">
  </li>
  <li>
    <img src="#" alt="item 2">
  </li>
  <li>
    <img src="#" alt="item 3">
  </li>
  <li>
    <img src="#" alt="item 4">
  </li>
</ul>

Explanation:

• I delimited that would be 4 items per column because each li has min-width of 24.5%.

Note: if delimiting li with 25% you will see that one of the elements must break down, this is due to the rendering of the browser, since it considers besides 25% of the elements some other elements such as the scroll bar that they add up to more than 100% and this generates a break, that is, I advise you to use a little below this value, such as 24.5%.

• Align the thumbs inside the li with margin 0 auto;

• For other breaks in the responsive you can use media query, for example for 2 items per column you use 50% min-width (use 49%). Media query examples .

There are also other solutions like flexbox, display table ... But I advise you to use these as they are the easiest and most compatible with the browsers used today. I hope to have helped, any doubt can comment .. Thanks!

<div class="anime-item"> , in this element it places:

position: relative;
margin: auto;