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!