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

Question

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

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!

Answer 1

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 .