Centralizar DIVs filho no DIV pai?

Front-end CSS
,
#1

Galera, estou com um problema aqui, tenho que centralizar algumas divs filho no div pai, mas não sei como faze-lo.
OBS: novas divs serão adicionadas com o tempo, então elas devem ficar por ordem de “postagem”.

<html>
    <head>
        <title>title</title>
        <meta charset="UTF-8">
        <style>
            header{
                width: 100%;
                height: 100px;
                background-color: red;
            }
            
            section{
                background-color: yellow;
                overflow: auto;
            }

            div {
                width: 200px;
                height: 200px;
                background-color: green;
                border: solid 1px black;
                float: left;
                overflow: auto;  
                margin: 10px;
            }

            footer{
                width: 100%;
                height: 100px;
                background-color: red;
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <header>
        </header>

        <section id="corpo">
        <div id="12">12</div>
        <div id="11">11</div>
        <div id="10">10</div>
        <div id="09">09</div>
        <div id="08">08</div>
        <div id="07">07</div>
        <div id="06">06</div>
        <div id="05">05</div>
        <div id="04">04</div>
        <div id="03">03</div>
        <div id="02">02</div>
        <div id="01">01</div>
        </section>

        <footer>
        </footer>
    </body>
</html>
#2

Uma vez que suas divs têm height e width, você pode colocá-las como inline-block, tirar o float e centraliza-las na section.

section {
  text-align: center;

  div {
    display: inline-block;
    float: none;
  }
}