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
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.
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
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.
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 asmargin: 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
flexboxwill centre it perfectly whereasabsolute/translateis 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.