How I use Transform to Better-Position CSS Elements

I have been researching how to better-position objects using CSS. I love the calc, and display:flex; attributes but sometimes they're not the most elegant option. I have found a handy way to center an object within a div both horizontally and vertically. It makes use of the transform:translate(); attribute, and comes with a mindset on how I use it. It has grown to be more than that though. This method actually lets me specify the point I'm referencing when moving an object.

The Mindset

Before I was a web designer, I was an engineer and industrial designer. I worked for the Point of Purchase Display industry for about 10 years. During that time, I spent A lot of time drawing in both 3D and 2D. As a result, I fancy myself as a person who occasionally has a different perspective on positioning objects on a webpage, because my background is heavily focused on positioning shapes on a coordinate system using autoCAD, or SolidWorks. In the 2D CAD world, moving an object works something like this:

1. Select the object you want to move
2. Click on the point you want to move from
3. Click on where you want your selected point to be.
4. The selection is moved relative to the displacement of this first point.

The Challenge

This paradigm in many ways is similar to how CSS handles moving a position:relative; element using the left:,right:,top:,and bottom: attributes. The trouble is, there isn't a very good way to change the point you want to move from. Instead, CSS just positions the top-left corner of the selected element in the position you specify with the directional attributes. This limitation is frustrating. What happens when you want to place the center of an element on the absolute center of a page? Using only the code I've mentioned so far, you really can't.

And then, I read this handy little article about centering anything vertically using 3 lines of CSS. It was a great article that helped me see how transform:translateY(-50%); can actually move the point an object is moved about. Instead of positioning the top-left corner of an element, suddenly the object is being moved along the midpoint of the left edge of the element. If the element grows, the object stays centered. I expanded on it a little more, by using the shorthand version, transform:translate( X , Y ), which allowed me to center objects on both axis.

Example Pen

To illustrate how it works, I went ahead and made an interactive pen that shows what version of transform:translate(); I'm using to position the box. The dot represents the point that the element is being moved. I liken the use of transform:translate(); to selecting my point I want to move from, much like what I did in my CAD days when moving shapes. After using that, I will use the position attributes to change where that point is on the screen. The pen only shows positioning about the corners, and dead center of the element but in reality you could put the point anywhere on the element by changing the values in transform:translate();.

The example pen can be found here.

Happy Coding!