Centralize div without width on a display: flex

Question

I have the following structure:

<div id="peca" class="cinzaClaroBB">

    <section class="sessao peca">

        <div>

            <img src="folder.jpg">
            <img src="cartao.jpg">

        </div>

    </section>

</div>

div#peca and section.peca sane display: flex. to div that houses the images has not width.

Like centralize that one div in section?

I tried it the way below and it didn’t work!

/*PECA INICIO*/
body div#peca {
    background-color: #dae4ee;
    background: url(../../img/iconesHome/compras4.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
body div#peca > section.peca {
    width: 80%;
    align-content: center;
    align-items: center;
}
body div#peca > section.peca > div img {
    height: 350px;
    padding: 5px;
    cursor: pointer;
}
/*PECA FIM*/

Answer 1

But it is already centered friend. If a div has no defined width it will be 100% the width of the parent. So if the parent is the body one div within the body is 100% the width of body

In your case you have a div without width defined within a section which has 80% width, so this div within the section is 100% the width of section.

Here I put only one edge so you can realize the limits of the elements. See that the div enters "center" in the section. For the div is 100% the width of section as explained above.

In short: If a div is 100% the width of section and is inside the section, it automatically becomes centralized, as it takes up 100% of the space.

The red edge element is the section, and edge Frame and the div no defined width, that is to say 100% of the father’s width, since the div is an element of the block and occupies 100% of the width of the container, unless you put a defined width on it.

/*PECA INICIO*/
body div#peca {
    background-color: #dae4ee;
    background: url(../../img/iconesHome/compras4.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
body div#peca > section.peca {
    width: 80%;
    align-content: center;
    align-items: center;

    border: 4px solid #f00;
}
body div#peca > section.peca > div img {
    height: 350px;
    padding: 5px;
    cursor: pointer;
}

section.peca > div  {
  border: 2px solid #000;
  margin: auto;
}
/*PECA FIM*/

<div id="peca" class="cinzaClaroBB">

  <section class="sessao peca">

      <div>

          <img src="folder.jpg">
          <img src="cartao.jpg">

      </div>

  </section>

</div>