It is perfectly valid to use transform, combined with top and left CSS properties, to align and center elements.
Wondering if your production-ready, unicorn startup codebase is ready for this insane jump in technology? Not sure about using bleeding-edge CSS properties like transform without worrying about your user experience? Check the compatibility table at the end.
Production Ready Example
Take a look at this beautiful example:
.container { position: relative; .centered-element {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%); }}
It is short. Sweet. Brief. Breathtaking. (And so are you!)
Align to Center
.aligned-element {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);}
Align to Center-Left
.aligned-element {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);}
