Center Divs

23rd Jul 2022
3 mins reading time

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.

See More..
August 5, 2022

5 HTML tags extremely useful

HTML is definitely the first language a web developer learns early in his or her...


You, me, or nobody is gonna hit as hard as life. But it ain't about how hard ya hit. It's about how hard you can get hit and keep moving forward. How much you can take and keep moving forward.