Center an image vertically?

I'm not too sure what you mean, this does nothing:

#container {
  margin: 0 auto;
  vertical-align: middle;
}

I also want to add a content box under the image, so maybe the image shouldn't be centerd at all, but more like 25% to make the box be more centered and not be so far down? If I place the box div in the container the image will be more aligned to the right. Maybe this will help you imagine my design.

For starters, you'll need to size your container using min-height and min-width and padding.

#container{
    margin: 0 auto;
    padding: 0 auto;
    min-width: 100%;
    min-height: 100%;
    vertical-align: middle;
}

I'll do up a quick JSFiddle when I get to my desktop, but that should give you some basic guidance.

Best,

—J.

Should that center the whole #container div? If yes, that didn't work.

Okay... Scratch everything I said about vertical-align. Like @Steve said, it's not exactly the best for block elements. I've written up a basic JSFiddle for you: http://jsfiddle.net/vL6mJ/

It looks like this:

#container{
    display: block;
    background-color: #F00;
    width: 250px;
    height: 250px;
}

#container img{
  position: relative;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

It's not very responsive, but it does the trick.

(Wow... I'm really rusty with this kind of stuff! Sorry for all of the confusion.)

–J.

Thank you. I solved it like this:

#container {
  position: fixed;
  top: 30%;
  left: 50%;
  margin-top: -65.5px;
  margin-left: -366.5px;
  width: 733px;
}

Now it looks like this: http://piclair.com/data/y4pm7.jpg. It is my first site, any improvements are welcome. It's supposed to be a tiny upload service used by me and my friends, nothing fancy.

Again, keep in mind that this is not the most ideal solution to the problem because it forces the image's position to be adjusted by pixels rather than %. If you plan on doing something more like this in the future, you'll want your solution to be a bit more responsive.

Nevertheless, I'm glad everything worked out for you!

Isn't your solution the same? That's what I thought in the beginning but I can't seem to find a pixel-less solution.

The reason that solution is hard to, as you say, make pixel-less, is because it is hard to know the dimensions of any particular image you decide to include inside of that element. the #content img rule would need to adjust the negative margins relative to the size of the actual image. That is possible, you just need to set the size of the image correctly inside of that rule. Allyson Grayce has an excellent introduction to responsive design here on the Treehouse website that I'm sure you've already seen. But it might help make the issue clearer if you rewatched it.

Actually I'm just going through the CSS Deep Dive so I will be there soon I guess. I'm following the web design adventure.

Random question out of the blue, has people actually gotten jobs right after finishing the courses on this website or do they act as a foundation which you can build upon and learn more, but not giving you the proper qualifications for a real job?

That depends on what you mean by "proper qualifications for a real job." I think that Treehouse gives a lot of people the barebones skills they need to become competent developers and designers. I think that you'll learn plenty of interesting, practical skills through your Treehouse instruction. Just think about what you've already learned in the Web Design adventure! Everything kind of builds... Before long, you'll know more than just a thing or two; you'll have the practical understanding of how to make a professional looking website.

As a personal anecdote, I have a classical four-year-college background in I.T. and computer science, which, granted, is a great background to have -- don't get me wrong. But, with that said, I've found that Treehouse provides its students with the wherewithal to make it in the real world as designers. There are plenty of success stories of real Treehouse students starting real careers in Web design, Web development, business, and interaction design.

Yes, Treehouse badges are foundational nuggets of knowledge. But like I said, the more you practice and cultivate your newfound skills, the more you'll learn! Before you know it, you'll have the background and the confidence to tackle some pretty nifty personal projects, and even if you're unsure about how to execute a personal side project, there are plenty of people in the Treehouse community (fellow students as well as expert Treehouse teachers) who are more than willing to guide you along.

Martin Norberg Treehouse is good both for learning the basics of web design and development and enhancing the skills you already have. In order to land a job, you're going to need at least a website that you can show employers, and explain what role you had in it's creation. The more high quality sites you can show people, the better.

Yes, that's what I thought. At the moment I'm feeling that the courses are more how you do everything, not nescessarily how you use them together and what good layouts actually are and how to code them. I'm halfway into the Deep Dive CSS and he's gone over what everything is, but how to use them and what generally good practices are. Maybe I'm not there yet, and maybe it's just the CSS course, but I feel that he's just explaining every principle and showing examples, but I could've done that reading pure documentation. It's not that fun. I liked the HTML course better because you learned tips & tricks every video on when and how to use everything, not just what it does.