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

Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points
Posted by Aakash Srivastav
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points

Auto Margin

I am stuck at "how to center my div both vertically and horizontally". Actually I have a div that is positioned at "20%" from top and centered horizontally. Here's my HTML-

    <div class="banner">
            <div class="container">
                <h2>Move.Rest.Recover.Move</h2>
            </div>
        </div>

Here what I am using in CSS-

.banner{
    height: 340px;
    background-image:url(http://s3.amazonaws.com/codecademy-content/projects/move/feature.jpg);
    background-size: cover;
    text-align: center;
    position: relative;

}

.banner .container{
    position: absolute;
    top: 20%;
    width: 80%;
    margin: 0 auto;
}

I search this issue on "Stack Overflow" but everyone has its different answer. Here is the link- https://stackoverflow.com/questions/14123999/center-a-div-horizontally-and-vertically Which method is best suitable and others are not? Please help me. Thanks.

4 Answers

Luke Pettway
Luke Pettway
16,593 Points

Margin tends to work a little differently when you use position absolute, if you want to perfectly center (with the 20% offset at the top) your div in the middle you could try something like this:

.banner .container { margin: auto; position: absolute; top: 20%; left: 0; bottom: 0; right: 0; }

Here's an example of what you are doing:

https://codepen.io/lukepettway/pen/QazxwE

I added a 20% bottom so that the content in the container would be equal spacing above and below.

Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points
Aakash Srivastav
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points

Thanks Luke :) . I got that. I have some other questions.Can I use these CSS code to get the result: 1.

.banner .container{
    position: absolute;
    top: 20%;
    width: 80%;
    left:35%;
    margin-left: -25%;
}

2.

.banner .container{
margin: 0 auto;
    top: 20%;
    position: absolute;
    left: 50%;
    transform : translateX(-50%);
}

If yes , then which is the best method to achieve the required result. I didn't understand the "2" case in which "transform" property is used because I had run this method and it done the job. But whats happening there actually. Please explain . Thank YOu.

Luke Pettway
Luke Pettway
16,593 Points

Personally I'd use the translate method instead of using margin as margin uses element size to determine how much to offset it, when you are dealing with a variable width, that can cause it to not always be centered.

Using translate it takes the position of the elements centered X coordinate and then shifts it based on the percent you pass in. It will always be consistent regardless of the size of the element being passed in.

johannaho
johannaho
4,150 Points
johannaho
johannaho
4,150 Points

Just a quick answer. You might try CSS Grid. With grid you're able to put things in a certain spot on the screen. First define the columns and rows and their width and height. And then you can tell the browser where exactly you want your picture, box or text to be. Each cell in css grid can have it's own css rules and with that you can make sure your text behaves just as you want it to do.

Good luck, Johanna

johannaho
johannaho
4,150 Points
johannaho
johannaho
4,150 Points

Hi Aakash,

CSS Grid is not difficult to learn if you are already familiar with building websites. It's just a different way of looking to your screen and the placement of elements on it.

There is a course in the Library of 111 minutes. Or look for Rachel Andrew first on the internet. She has written some very good articles about it.

And as far as I know Grid is the best way to control the vertical placement of elements. There are many ways to control the horizontal placement, like Bootstrap, margins, flexbox, etc. But with none of them it's possible to tell the browser exactly where you want your stuff vertically, no matter what the screen size is. Grid is responsive as well.

Succes with your website! Johanna

Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points
Aakash Srivastav
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points

Hey johannaho ! Thanks. I understood what you are trying to say. Actually I am moving according to the syllabus designed by the Treehouse and I am quite far from CSS Grid. But will reach there soon . Thanks for suggesting me. And I will reply after learning CSS grid. ;) Happy Coding.

Jake Milburn
Jake Milburn
13,608 Points
Jake Milburn
Jake Milburn
13,608 Points

I would advise setting the divs width to 100% and then messing around with margin percentages to align it vertically.