title: Dynamically align item with CSS
body: <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>