FYI, I found a way, but it is a dirty one. I would be glad if someone can share a more elegant manner to do this (especially, one that would allow having a fixed height for the vertically centered element).
In the editor, I set up everything at the top like this:
The white group was the group I wanted #vertically-extended and the red element was a button I wanted to get #vertically-centered (I just wanted a text but I used a button because it keeps the text inside vertically centered when it is dynamically resized, unlike a text element).
I directly exposed the IDs of all elements in the app Settings so I didn’t have to add any HTML element in the groups I wanted to modify but simply to specify the relevant ID at the bottom of the contextual element menu of each element.
Here is the JS run upon loading:
$(document).ready(function(){
$(“.main-page”).css(“height”,“100vh”);
$(“#vertically-extended”).css(“height”,“100vh”);
$(“#vertically-centered”).css(“height”,“10vh”);
$(“#vertically-centered”).css(“margin-top”,“45vh”);
});
I defined a relative height (10vh) for the red element and a corresponding top margin (45vh) to get everything perfectly centered. I could not find a way to define the margin in a manner that would work with a fixed height for the red element (“auto”, “middle”, “50%”, etc. did not work). I guess this is an easy one for the JS experts out there 
The result:
Here is the link to the editor:
Edit: finally found the way to have a fixed-height element vertically centered (need to position the element 50% down from the top of the viewport and then move it back up by 50% of its own height):
$(document).ready(function(){
$(“.main-page”).css(“height”,“100vh”);
$(“#vertically-extended”).css(“height”,“100vh”);
$(“#vertically-centered”).css(“top”,“50vh”);
$(“#vertically-centered”).css(“transform”,“translateY(-50%)”);
});