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

Posted by Tanca-Sanquer Gigel
Tanca-Sanquer Gigel
6,562 Points

How do i center only one div on a page both horizontally and vertically?

So i just bought my website domain and hosting and now i have to design it and publish it.In the meantime i don't want to let a blank "index of" page,so i wanted to make a small "Hey im building my website,please check later" message.So here is what i did:

Html code:

<body>
        <div class="main">
           <p>Welcome!My website in under construction.</p>
        </div>

        <footer>
            <p>&copy; Tanca Gigel 2015 | Web Design Student.</p>
        </footer>
</body>

Css code:

body {
            background-color: #e3effb; 
 }

.main {     

        margin: auto;
        margin-top: 20%;
        font-family: Georgia, "Times New Roman", Times, serif;
        color: black;
        font-size: 35px;
        text-align: center;

}

footer {

        font-family: Georgia, "Times New Roman", Times, serif;  
        font-size: 16px;
        color: black;
        margin: auto;
        text-align: center;
}

Ok,so left and right is centered but then top and bottom is not.I gave a margin-top: 20% to push the div and on my 1920px resolution screen it looks completely centered;but when i lower the resolution the div does not look centered vertically.

So how do i completely center the main div(both horizontally and vertically)for all resolution view?

Jacob Mishkin
Jacob Mishkin
23,118 Points

edited code for formatting.

3 Answers

Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

First you need to create a container div or wrapper div. Then position that div relative, with a desired width and a margin set to auto. Then inside the wrapper div set your vertical-align in the CSS to middle and text-align to center. It should work.

Jacob Mishkin
Jacob Mishkin
23,118 Points

Take a look at the code below, and see how it match's up with yours. This should keep your text aligned in the center of the page with a margin-top of 20%. If you are still having problems, please post your code and let's take a look at it. 

<div id="wrapper">
    <div class="main">
         <p>Welcome! My website in under construction.</p>
         </div>
    <footer>
        <p>&copy; Tanca Gigel 2015 | Web Design Student.</p>
       </footer>
</div>

#wrapper {
    position: relative;
    width: 80%; 
    margin: auto;
    text-align: center;
    vertical-align: middle;
}

p {
    font-family: Georgia, "Times New Roman", Times, serif;  
}

.main { 
   margin-top: 20%;
  font-size: 35px;       
}

footer {
   font-size: 16px;
}

I hope this helps.

Tanca-Sanquer Gigel
Tanca-Sanquer Gigel
6,562 Points
Tanca-Sanquer Gigel
Tanca-Sanquer Gigel
6,562 Points

I tried and it didnt work.But thank you for the idea,because centering a div inside another div,there is a lesson on that i will check it out.

Tanca-Sanquer Gigel
Tanca-Sanquer Gigel
6,562 Points
Tanca-Sanquer Gigel
Tanca-Sanquer Gigel
6,562 Points

Ok,the text and the div is centered.Thank you.

Jacob Mishkin
Jacob Mishkin
23,118 Points

Awesome! Happy coding.