Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Nikolay Batrakov
9,604 PointsSo what are your favorite box centering techniques?
I personally fall in love with adding a pseudo :before and aligning it vertically in the middle.
Nikolay Batrakov
9,604 PointsHere is my pen http://codepen.io/Ganserich/pen/vaFpg
we get parent:before selector, give it 100% height and vertical alignment middle, so it goes right in the middle of the parent box and move there everything after it. Actually I found that on http://css-tricks.com/
6 Answers
Nick Pettit
Treehouse TeacherMy favorite is the "absolute centering" technique:
.Absolute-Center {
height: 50%; /* Set your own height: percents, ems, whatever! */
width: 50%; /* Set your own width: percents, ems, whatever! */
overflow: auto; /* Recommended in case content is larger than the container */
margin: auto; /* Center the item vertically & horizontally */
position: absolute; /* Break it out of the regular flow */
top: 0; left: 0; bottom: 0; right: 0; /* Set the bounds in which to center it, relative to its parent/container */
}
Kennard McGill
Full Stack JavaScript Techdegree Graduate 43,179 PointsThis works for me. Would love to see you use the pseudo element :before. Sounds pretty tricky.
.box1{
text-align: center;
border: 1px #efefef solid;
width:50%;
display:block;
margin: 0 auto;
}
.box2{
position: relative;
left:20%;
right:20%;
width:60%;
display:block;
border: 1px #efefef solid;
text-align: center;
}
Kennard McGill
Full Stack JavaScript Techdegree Graduate 43,179 PointsHere is a link to see in action. Hope it helps!
http://jsfiddle.net/knard/8k4Sa/2/
box 1 - Just uses auto margin left and right which will center your element box 2 - Uses position relative to the parent container. In this case the body element. You set the box to your desired with and set left and right offsets to be equal
Nikolay Batrakov
9,604 Pointsmy pen http://codepen.io/Ganserich/pen/vaFpg
we get parent:before selector, give it 100% height and vertical alignment middle, so it goes right in the middle of the parent box and move there everything after it. Actually I found that on http://css-tricks.com/
your box1 should center the element only horizontally, the box2 should work, thanx! Never thought that it is possible to use percents with position property! Cool!
Kennard McGill
Full Stack JavaScript Techdegree Graduate 43,179 PointsInteresting piece of css. I wonder what context that was developed for because it seems like a work around for a special project. I guess there's never one way. Thanks i'll make note of this method as well.
James Barnett
39,199 PointsI like display: table
.container {
display: table;
text-align: center;
}
.copy {
display: table-cell;
vertical-align: middle;
}
.container img { height: 100%; }
Nikolay Batrakov
9,604 PointsThat works too, thank you
Nikolay Batrakov
9,604 PointsI like that most, simple and clear! Grab it into my pocket. Besides there are lot of cool stuff from Houston, thanx alot for the link too!
Jaka Dirnbek
7,046 PointsJaka Dirnbek
7,046 PointsCan you make a fiddle displaying the concept because I dont get it.
Thanks