Positioning elements using CSS transform without JavaScript

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!