Eons ago, it used to be that, positioning of elements in the center/corner of a div required JavaScript code, to calculate the offset based on the width/height of the element itself as well as its parent.
Things are much easier now with CSS transform. A simple demo is shown below, with 9 squares positioned at the corners/edges/center of their parent container. Try resizing your browser or rotating your device orientation – the squares stay in their positions regardless of the aspect ratio and size of their parent container.
Here’s the CSS for the 9 positions:
/**
* Transforms cannot stack across multiple CSS classes, i.e. the transform
* from a more specific class will override that from a previous one instead
* of adding to it. Hence, combining vertical and horizontal positions,
* i.e. <div class="position-top-left"> instead of <div class="top left">.
*/
.position-top-left {
position: absolute;
top: 0;
left: 0;
transform: translate(0, 0);
}
.position-top-center {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
}
.position-top-right {
position: absolute;
top: 0;
left: 100%;
transform: translate(-100%, 0);
}
.position-middle-left {
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
}
.position-middle-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.position-middle-right {
position: absolute;
top: 50%;
left: 100%;
transform: translate(-100%, -50%);
}
.position-bottom-left {
position: absolute;
top: 100%;
left: 0;
transform: translate(0, -100%);
}
.position-bottom-center {
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -100%);
}
.position-bottom-right {
position: absolute;
top: 100%;
left: 100%;
transform: translate(-100%, -100%);
}
And here’s the HTML for the demo above:
<style>
.sample-container {
position: relative;
outline: 1px solid black;
margin: 0 auto;
width: 25vw;
height: 25vh;
}
/* Adapted from https://spin.atomicobject.com/2015/07/14/css-responsive-square/ */
.square {
width: 10%;
padding-bottom: 10%; /* value to be same as width, makes height same as width */
}
</style>
<div class="sample-container">
<div class="square position-top-left" style="background:red;"></div>
<div class="square position-top-center" style="background:orange;"></div>
<div class="square position-top-right" style="background:yellow;"></div>
<div class="square position-middle-left" style="background:green;"></div>
<div class="square position-middle-center" style="background:blue;"></div>
<div class="square position-middle-right" style="background:indigo;"></div>
<div class="square position-bottom-left" style="background:violet;"></div>
<div class="square position-bottom-center" style="background:silver;"></div>
<div class="square position-bottom-right" style="background:gold;"></div>
</div>
Feel free to reuse the CSS, ad huc!