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

CSS CSS Layout Techniques Positioning Schemes Absolute Centering

Posted by Vamsi Pavan Mahesh Gunturu
Vamsi Pavan Mahesh Gunturu
4,541 Points

How does center positioning work?

In the video instructor made top,right,bottom and left as 0. And said that it will work only when margin is auto. And he used ::after. They all seem new to me. can anyone explain in detail?

1 Answer

Irina Blumenfeld
Irina Blumenfeld
9,198 Points

Here's a great guide about Centering in CSS: https://css-tricks.com/centering-css-complete-guide/ It depends if it's an inline item or a block level element. If it's a block level element, and it has a set width, to center it, you can set left and right margin to auto, and in CSS shorthand it looks like this: .element { margin: 0 auto; } top and bottom margin is set to 0, and right and left to auto

If it's an inline element, or inline-block (like links or text), you can center it horizontally like this: 

.element { text-align: center; }
Vamsi Pavan Mahesh Gunturu
Vamsi Pavan Mahesh Gunturu
4,541 Points

what about inline?

Antonio Jaramillo
Antonio Jaramillo
15,604 Points

I think that you set text-align: center for inline content, as you can't set any margins or padding to an inline element. Or you can center it's parent container if said parent container is a block or inline-block element.