How to center and vertically align to middle a div inside a page?

Problem

I have searched the internet for countless hours looking for a solution and I can never seem to find it. What if I had a log in page and I wanted to have it completely centered in the center of the page.

I've never figured out how to do this and hopefully someone can help me put and end to this lack of knowledge of mine.

Here is an example enter image description here

What I want is to have a div with a height of 410px and a width of 756px to be centered on the screen. So vertically and horizontally. I then want to be able to put other 's inside it with content. For example maybe I want to put a login page in there or a blog post or anything.

Major thanks in advance!

Problem courtesy of: kmgilbert100

Solution

Use margin: auto;.

HTML:

​<div class="middle">middle</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS:

​.middle
{
    width: 100px;
    height: 50px;
    border: solid 1px red;
    margin: auto;
}​

See this link for vertical centering.

Here's a fully working example.

Solution courtesy of: Paul Fleming

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.