Percent Aligment (puse CSS solution)

since the properties top, margin-top and margin-bottom when expressed in percentage are related to container width and not height (as one may espected

HTML

<!-- These objects define its position with respect to its center -->
<div class="muestra vertical_10 horizontal_50" style="background-color: red"></div>
<div class="muestra vertical_20 horizontal_10" style="background-color: black"></div>
<div class="muestra vertical_30 horizontal_60" style="background-color: green"></div>
<div class="muestra vertical_40 horizontal_20" style="background-color: blue"></div>
<div class="muestra vertical_50 horizontal_70" style="background-color: salmon"></div>
<div class="muestra vertical_60 horizontal_30" style="background-color: aqua"></div>
<div class="muestra vertical_70 horizontal_80" style="background-color: seagreen"></div>
<div class="muestra vertical_80 horizontal_40" style="background-color: royalblue"></div>
<div class="muestra vertical_90 horizontal_90" style="background-color: silver"></div>

<div class="middle_line"></div>


<!-- this object define its position with an offset -->
<div id="Specia_Offset" class="muestra vertical_10 horizontal_50"></div>

CSS

html, body { margin: 0; padding: 0; height: 100%; }
div { background: rgba(0,0,0,0.3); }
.middle_line { height: 1px; width: 100%; top: 0px; bottom: 0px; margin: auto; position: absolute; }

.muestra { width: 10%; height: 10%; 
    margin: auto;       /* Margin auto adjust both margins to the same value */
    position: absolute; /* position absolute let the left,right,top,bottom to work */
}

/* This is how is done to */
.vertical_10 { top: -80%; bottom:   0%; }
.vertical_20 { top: -60%; bottom:   0%; }
.vertical_30 { top: -40%; bottom:   0%; }
.vertical_30 { top: -40%; bottom:   0%; }
.vertical_40 { top: -20%; bottom:   0%; }
.vertical_50 { top:   0%; bottom:   0%; } 
.vertical_60 { top:   0%; bottom: -20%; }
.vertical_70 { top:   0%; bottom: -40%; }
.vertical_80 { top:   0%; bottom: -60%; }
.vertical_90 { top:   0%; bottom: -80%; }

.horizontal_10 { left: -80%; right:   0%; }
.horizontal_20 { left: -60%; right:   0%; }
.horizontal_30 { left: -40%; right:   0%; }
.horizontal_40 { left: -20%; right:   0%; }
.horizontal_50 { left:   0%; right:   0%; }
.horizontal_60 { left:   0%; right: -20%; }
.horizontal_70 { left:   0%; right: -40%; }
.horizontal_80 { left:   0%; right: -60%; }
.horizontal_90 { left:   0%; right: -80%; }


/*
    Offset:

    "bottom: -10%;" means 5% (of container height) up from vertical center (of contained block).
    Since this object has 10% of height, the reference point is on the block top edge.
    
    "right: -10px;" means 5px left from horizontal center (of contained block).
    You can notice its position is 5px right from the solid red block
*/
#Specia_Offset {
    background-color: rgba(200, 0, 0, 0.5);
    bottom: -10%;
    right: -10px;
}