V-Align Dev2bcss – jsComparing two methods
CONTENT: wrapper | contain· OK
Using ‹section› instead of ‹div› is not a problem (?) so flex is a better solution
.wrapper {height:max-content; padding:20px; display:flex; justify-content:space-evenly; align-items:center; background-color:#4BB1E7;}
        .contain {width:auto;height:auto; margin:20px!important; padding:25px; border:2px solid blue;}
CONTENT Parent | Child · notOK
Status?? .. CAUTION: bad fix used to make it work -› }}
1/ Using ‹section› instead of ‹div› ruined the H-alignement!
2/ Border doesn’t display
.parent {position:relative; min-height:50%; height:max-content;display:flex;justify-content:space-evenly;align-items:center; padding:20px!important;}}
.child  {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%); 
width:max-content;height:max-content; margin:auto; padding:30px!important; border:2px solid blue!important;} 
.child img {display:block; width:15vw;height:auto; margin-top:25px; margin-left:50%;transform:translateX(-50%);}
CONTENT Parent | Child· notOK
1/ The parent container (relative) has to have a defined height..
otherwise this does not work!.. unless a double closing } is added in the parent css??? parent {position:relative; min-height:100%;}} Tempting..