How to make an element center within spare space?

Card Design
1

Basically what I want to achieve is this

image
image750×1294 78 KB

I want the bottom half to stick to the card bottom, while the upper half relatively remain center. My card template is really simple

{{df}}
{{mcq}}
.
The tricky part here is that both fields are not absolute and I tried using position:absolute to deal with the bottom part, but I couldn’t figure it out how to do the top part. Hope someone could understand what I am saying and possibly come up with a solution :grinning:

2

Does this fulfill your needs?

{{df}}
<div style="position: absolute; bottom: 0em;">
  {{mcq}}
</div>

Normally, they should be centered because it’s in the Anki card styling (every card is by default centered).