Anki CSS/HTML align vertically to bottom / center / top - html

Question

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 <br>, 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 <br> 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
<div class="front" lang="ja">
<span class="large japanese">{{kanji}}</span>
<br>
<hr>
{{hint:Memory palace}}
back
<div class="back" lang="ja">
{{strokeDiagram}}<br> <br>
<hr>
<span class="medium">{{keyword}}</span>
<br/><br/>
<span class="large japanese">{{kanji}}</span>
<br>
<span class="medium">{{myStory}}</span> <br><hr>
<span class="tiny"> Memory palace: {{Memory palace}}</span>
<span class="tiny"> Frame: {{frameNoV6}} Strokes: {{strokeCount}} — Jouyou Grade: {{jouYou}} JLPT: {{jlpt}}</span><br/>
<!-- Uncomment for Heisig Story
<hr>
<span class="medium">{{heisigStory}}</span>
{{#heisigComment}}<br/><br/><span class="small">{{heisigComment}}</span>{{/heisigComment}}
-->
<!-- Uncomment for koohi Story
<hr/>
<span class="medium">{{koohiiStory1}}</span>
-->
<hr/>
<br> <br>
<!-- Uncomment for On-Yomi and Kun-Yomi
<span class="small">On-Yomi: <span class="medium japanese">{{onYomi}}</span> Kun-Yomi: <span class="medium japanese">{{kunYomi}}</span></span><br/>
-->
<span class="tiny">Constituents: {{constituent}}</span><br/><br/>
{{#readingExamples}}<span class="tiny">Examples: <span class="japanese">{{readingExamples}}</span></span>{{/readingExamples}}
</div>
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";}

Answer 1

Front
div.front,
div.back {
width: 100%;
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";
}
/* Positional */
.bottom {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.center {
display: block;
position: absolute;
left: 0;
right: 0;
/* I want a better way to do the below! */
top: 50%;
transform: translateY(-50%);
}
.top {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
<div class="front" lang="ja">
<span class="large japanese center">{{kanji}}</span>
<hr>
<span class="bottom">{{hint:Memory palace}}</span>
Note that the <hr> is unstyled.
Back
div.front,
div.back {
width: 100%;
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";
}
/* Positional */
.bottom {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.center {
display: block;
position: absolute;
left: 0;
right: 0;
/* I want a better way to do the below! */
top: 50%;
transform: translateY(-50%);
}
.top {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
<div class="back" lang="ja">
<div class="top">{{strokeDiagram}}</div>
<hr>
<div class="center"><span class="medium">{{keyword}}</span>
<span class="large japanese">{{kanji}}</span>
</div>
<div class="bottom">
<span class="medium">{{myStory}}</span> <br>
<hr>
<span class="tiny"> Memory palace: {{Memory palace}}</span>
<span class="tiny"> Frame: {{frameNoV6}} Strokes: {{strokeCount}} — Jouyou Grade: {{jouYou}} JLPT: {{jlpt}}</span><br/>
<!-- Uncomment for Heisig Story
<hr>
<span class="medium">{{heisigStory}}</span>
{{#heisigComment}}<br/><br/><span class="small">{{heisigComment}}</span>{{/heisigComment}}
-->
<!-- Uncomment for koohi Story
<hr/>
<span class="medium">{{koohiiStory1}}</span>
-->
<hr/>
<br> <br>
<!-- Uncomment for On-Yomi and Kun-Yomi
<span class="small">On-Yomi: <span class="medium japanese">{{onYomi}}</span> Kun-Yomi: <span class="medium japanese">{{kunYomi}}</span></span><br/>
-->
<span class="tiny">Constituents: {{constituent}}</span><br/><br/> {{#readingExamples}}
<span class="tiny">Examples: <span class="japanese">{{readingExamples}}</span></span>{{/readingExamples}}
</div>
</div>
One problem with this technique is that, if there is insufficient space, they will draw over each other.