markdown guide
 

I was also thinking of writing something similar in my current project at work I just got to know a little trick like: making the first div of the page as width: 100% and then have the 1st child div inside that as margin: 0 auto; this way I will have all my content inside those 2 divs landing just in between the page.

So I want to create a starter like project or article writing the set of instruction one should like to go through before setting up working on a project

 

In my opinion the best way to center any content vertically and horizontally is by adding this CSS to the main container.

.container{
width: 50%;
margin: auto;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

 

Interesting, why do you say this? I'm a fan of flexbox myself. Comparing the two approaches flexbox will centre it perfectly whereas absolute/translate is off.

Flex: jsfiddle.net/jamesbrndwgn/q65x0umz/1/
Absolute/Translate: jsfiddle.net/jamesbrndwgn/ga6yr8hj/1/

I do on occasion use the absolute/translate approach for centring images or icons when the occasion suits, but never for containers.

Perhaps I also just have shell shock from the old IE days, but when the box model doesn't align with the element I often see it as a red flag. e.g. In the absolute/translate fiddle the body height is 0 and that worries me

Hello James!

You're right, flexbox should be the new way to center things with CSS, I'm just so used to the "Absolute/Translate" method, it's time for me to update.

Just one thing. The "Absolute/Translate" method works just fine through all modern browsers, is just that you are missing the commas between the "50%" in the translate rule, also you added a width of 50%, go ahead and remove this and the word "Foo" will be just on the center this time.

Whoops! Good catch. I guess that's the problem working with build systems these days, that rule would have been flagged.

 

The animations are nice & smoothly done. Good stuff Arturo.

 

Amazing work Arturo!
I would like to read/watch a tutorial on how you made these codepens!

 
Classic DEV Post from Oct 16 '18

Who is hiring? (As of October 2018)

Members of the dev.to community sharing open job opportunities at their companies.

Arturo Cabrera profile image
I'm a front-end developer :) I love to create interactive elements and pure CSS animations, I really enjoy web development in general.

Sore eyes?

dev.to now has dark mode.

Go to the "misc" section of your settings and select night theme ❀️