DEV Community

Discussion on: Pure CSS Projects Intro

Collapse
 
pixmy profile image
Arturo Cabrera

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%);
}

Collapse
 
jamesthomson profile image
James Thomson

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

Thread Thread
 
pixmy profile image
Arturo Cabrera

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.

Thread Thread
 
jamesthomson profile image
James Thomson

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