Dynamically align item with CSS
<p>I would like to align a div in the parent container by allowing the user to select the following options:</p>

<ul>
<li>Top Left</li>
<li>Top Middle</li>
<li>Top Right</li>
<li>Left Middle</li>
<li>Centered</li>
<li>Right Middle</li>
<li>Bottom Left</li>
<li>Bottom Middle</li>
<li>Bottom Right</li>
</ul>

<p>While I find a lot of resources how to vertically and horizontally align using flexbox, I am wondering if somebody has created a simple collection of CSS-classes I could easily apply.</p>

<p><strong>Edit</strong>:<br>
The basic markup is very simple, just a button:</p>

<pre><code>&lt;div&gt;
    &lt;div class="btn"&gt;This is my button&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Now to get to "Right Middle" I'd ideally to do something like:</p>

<pre><code>&lt;div class="vertical-align-middle horizontal-align-right"&gt;
   &lt;div class="btn"&gt;This is my button&lt;/div&gt;
&lt;/div&gt;
</code></pre>