html文件anki,Anki CSS/HTML align vertically to bottom / center / top

I am editing the template of an Anki deck, which uses HTML and CSS. What I would like to do here is on the front side, vertically aligning the Japanese character to the middle and the hint to the bottom. I tried manually spacing everything with
, but then it doesn't work in different resolution windows (and is just a dirty solution) Front example.

On the back side I would like to make the stroke diagram always snap to the top, the Japanese character with keyword and mnemonic in the middle, and the rest on the bottom. If I tried spacing this with
I would get the same problem as on the front page, plus the mnemonic is sometimes 1 line, but can also be 5+ lines so it would have to be aligned dynamically to work even if the window size was always the same Back example with arrows.

I already found this question which seems to somewhat answer my question, but as I know practically nothing about CSS/HTML I don't know how to apply it in my case. If you could help me I would greatly appreciate it as I spend a lot of time with this deck and it keeps annoying me, I would also share the improved version for other people to use.

Here is the code for the front

{{kanji}}

---

{{hint:Memory palace}}

back

{{strokeDiagram}}

---

{{keyword}}

{{kanji}}

{{myStory}}

---

Memory palace: {{Memory palace}}

  Frame: {{frameNoV6}}   Strokes: {{strokeCount}}   —   Jouyou Grade: {{jouYou}}   JLPT: {{jlpt}}

---

Constituents: {{constituent}}

{{#readingExamples}}Examples: {{readingExamples}}{{/readingExamples}}

and the styling,

div.front, div.back {

text-align: center;

font-family: sans-serif;

font-size: 16px; /* line height is based on this size in Anki for some reason, so start with the smallest size used */

}

span.tiny {font-size: 16px;}

span.small {font-size: 24px;}

span.medium {font-size: 32px;}

span.large {font-size: 96px;}

span.italic {font-style: italic;}

.win .japanese {font-family: "Meiryo", "MS Mincho";}

.mac .japanese {font-family: "Hiragino Mincho Pro";}

.linux .japanese {font-family: "Kochi Mincho";}

.mobile .japanese {font-family: "Motoya L Cedar", "Motoya L Maru", "DroidSansJapanese", "Hiragino Mincho ProN";}