Dynamically align item with CSS - css

Question

I would like to align a div in the parent container by allowing the user to select the following options:
Top Left
Top Middle
Top Right
Left Middle
Centered
Right Middle
Bottom Left
Bottom Middle
Bottom Right
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.
Edit:
The basic markup is very simple, just a button:
<div>
<div class="btn">This is my button</div>
</div>
Now to get to "Right Middle" I'd ideally to do something like:
<div class="vertical-align-middle horizontal-align-right">
<div class="btn">This is my button</div>
</div>

Answer 1

You can position elements in this way by creating one container element with 3 sub-containers for each row with following css.
display: flex;
flex-direction: column;
justify-content: space-between;
This will position rows at top, middle and bottom of container. Next you can can use this css for each row and that will position divs at left, center and right of row.
display: flex;
justify-content: space-between;
body,
html {
margin: 0;
padding: 0;
}
.content {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.row {
display: flex;
justify-content: space-between;
}
.box {
border: 1px solid black;
}
<div class="content">
<div class="top row">
<div class="box">Top left</div>
<div class="box">Top center</div>
<div class="box">Top right</div>
</div>
<div class="middle row">
<div class="box">Middle left</div>
<div class="box">Middle center</div>
<div class="box">Middle right</div>
</div>
<div class="bottom row">
<div class="box">Bottom left</div>
<div class="box">Bottom center</div>
<div class="box">Bottom right</div>
</div>
</div>
If you have single element in container then you can use different combinations of align-items and justify-content to position element but that also depends on flex-direction (by default is row). So for example if you want to position element at bottom-center you can use
display: flex;
align-items: flex-end;
justify-content: center;
body,
html {
margin: 0;
padding: 0;
}
.content {
height: 100vh;
display: flex;
align-items: flex-end;
justify-content: center;
}
.btn {
border: 1px solid black;
}
<div class="content">
<div class="btn">Button</div>
</div>

Answer 2

Take a look at my example, you need to create classes for every position, then use a little jQuery to make it changed dynamically.
(function() {
$(".select-box").on("change", function() {
var $selected = $(this).find("option:selected").val();
$("#content").removeClass().addClass($selected);
});
})();
.select-box {
position: absolute;
top: 100px;
left: 100px;
}
#content {
display: flex;
width: 600px;
height: 400px;
padding: 20px;
}
.box {
width: 50px;
height: 50px;
background-color: fuchsia;
}
#content.top-left {
justify-content: flex-start;
align-items: flex-start;
}
#content.top-middle {
justify-content: center;
align-items: flex-start;
}
#content.top-right {
justify-content: flex-end;
align-items: flex-start;
}
#content.left-middle {
justify-content: flex-start;
align-items: center;
}
#content.centered {
justify-content: center;
align-items: center;
}
#content.right-middle {
justify-content: flex-end;
align-items: center;
}
#content.bottom-left {
justify-content: flex-start;
align-items: flex-end;
}
#content.bottom-middle {
justify-content: center;
align-items: flex-end;
}
#content.bottom-right {
justify-content: flex-end;
align-items: flex-end;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="content">
<div class="box"></div>
</div>
<select class="select-box">
<option value="top-left">Top Left</option>
<option value="top-middle">Top Middle</option>
<option value="top-right">Top Right</option>
<option value="left-middle">Left Middle</option>
<option value="centered">Centered</option>
<option value="right-middle">Right Middle</option>
<option value="bottom-left">Bottom Left</option>
<option value="bottom-middle">Bottom Middle</option>
<option value="bottom-right">Bottom Right</option>
</select>

Answer 3

The morass library might be useful.
$ mkdir test-project
$ npm init
$ npm install morass
$ edit index.html
$ serve
where index.html is:
<html>
<head>
<style>
.big { height: 200px; width: 200px; outline: 1px red solid; }
.small { height: 100px; width: 100px; outline: 1px green solid; }
</style>
<link rel='stylesheet' href='./node_modules/morass/dist/index.css'/>
</head>
<body>
<div class='big flex align-left align-bottom'>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^
<div class='small'></div>
</div>
</body>
</html>
You can replace align-left with align-center or align-right, and align-bottom with align-middle or align-top, etc.
This morass library is based on what are called "micro-classes". For instance, you could also add a vertical class to make the flex items go top to bottom, or for multiple items, justify to spread them out.