JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="box box1"><span>1</span></div>
    <div class="box box2"><span>2</span></div>
    <div class="box box3"><span>3</span></div>
    <div class="box box4"><span>4</span></div>
    <div class="box box5"><span>5</span></div>
    <div class="box box6"><span>6</span></div>
    <div class="box box7"><span>7</span></div>
    <div class="box box8"><span>8</span></div>
    <div class="box box9"><span>9</span></div>
    <div class="box box10"><span>10</span></div>
    <div class="box box11"><span>11</span></div>
    <div class="box box12"><span>12</span></div>
</div>

<!-- Try removing div lines above. Remaining divs will always be centered -->

CSS

html { height: 100%; }

body {     
    height: 100%;
    background-color: yellow;    
    }

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    width: 400px;
    height: 100%;
    margin: auto;
}

.box {
    height: 50px;
    width: 75px;
    margin: 10px;
    background-color: lightgreen;
    border: 1px solid #aaa;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}