Whether you are a beginner or veteran developer sooner or later you will end up looking for this page. So here are 3 ways to center a div/element in different ways…use them to your advantage ????
Centering an element horizontally
Given a fixed width you can tell your element to take up as much space on the left as it does on the right, so that it sits EXACTLY in the center on every device
See the Pen Center Horizontally with margin auto by MirkoDev (@mirkodeveloper-the-bold) on CodePen.
Centering an element using flexboxes
Using flexboxes and/or grid items is in the modern web now a must. So here is a way to center a div/element horizontally (justify-content: center;) and vertically (align-items: center;)
See the Pen Center div using flexbox by MirkoDev (@mirkodeveloper-the-bold) on CodePen.
Centering a div/element using Transform
Using the position absolute interaction inside an element with position relative we can tell the child elements to position exactly in the center of the parent element
See the Pen Center DIV using Transform by MirkoDev (@mirkodeveloper-the-bold) on CodePen.