JSFiddle - React, Tailwind, and code Playground

HTML

<div class="top6">
    <div class="in6">6</div>
    <div class="in6"></div>
    <div class="in6"></div>
</div>
<br>
    

<div class="topp">
    <div class="top5">
         <div class="in5">5</div>
         <div class="in5">5</div>
    </div>
</div>
<br>
    
<div class="top4">
<div class="in4">
    <div class="in44">4</div>
    <div class="in44"></div>
    <div class="in44"></div>
</div>
</div>
<br>

<div class="top3">
    <div class="in3">3</div>
    <div class="in3"></div>
    <div class="in3"></div>
</div>
<br>
<div class="top2">
    <div class="in2">2</div>
    <div class="in2"></div>
    <div class="in2"></div>
</div>
  <br>
      
<div class="top">
    <div class="in">1</div>
</div>

CSS

/* flex method beautiful */
.top6 {background-color: blue; height: 100px; display:flex; align-items: center;}
.in6 {background-color: yellow; width: 30px; height: 30px; margin-right: 5px; }



/* super hackish--abspos+negativMargin+extra div */
.topp {background-color: blue; height: 100px; position: relative;}
.top5 {position: absolute; top:50%; margin-top: -15px; }
.in5 {display: inline-block; background-color: yellow; height: 30px; width: 30px;}


/* display table method..works good so far..more is needed to also do horizontal center */
.top4 { display: table; background-color: blue; height: 100px; width: 100%;}
.in4 {display: table-cell; vertical-align: middle; }
.in44 {height: 30px; width: 50px; background:yellow; display: inline-block; overflow: hidden; }



/* line height method & single line only*/
.top3 {
    height: 100px;  font-size: 0pt;
    background-color: blue; line-height:100px;
}
.in3 {
    display: inline-block; margin-right: 5px; font-size: 20px; line-height: 22px;
    height: 30px; width: 30px;
    background-color: yellow;
    vertical-align: middle; 
}




/* pseudo element method */
.top2 {
    height: 100px;
    background-color: blue;
}
.top2:before {
    content:'';
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
.in2 {
    display: inline-block;
    height: 30px;
    background-color: yellow;
    vertical-align: middle;
    width: 30px;
}

/* uses absolute positioning so is very limited in dynamic enviornment */
.top {background-color: blue; position: relative; height: 100px;}
.in {height: 30px; width: 30px; background-color: yellow;
position: absolute; top: 0; bottom: 0;   margin: auto;
}