How to vertically center <div> inside the parent element with CSS?

This can be done with 3 lines of CSS and is compatible back to (and including) IE9:

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Example: http://jsfiddle.net/cas07zq8/

credit

The best approach in modern browsers is to use flexbox:

#Login {
    display: flex;
    align-items: center;
}

Some browsers will need vendor prefixes. For older browsers without flexbox support (e.g. IE 9 and lower), you'll need to implement a fallback solution using one of the older methods.

Recommended Reading

• Browser support
• A Guide to Flexbox
• Using CSS Flexible Boxes

You can vertically align a div in another div. See this example on JSFiddle or consider the example below.

HTML

<div class="outerDiv">
    <div class="innerDiv"> My Vertical Div </div>
</div>

CSS

.outerDiv {
    display: inline-flex;  // <-- This is responsible for vertical alignment
    height: 400px;
    background-color: red;
    color: white;
}

.innerDiv {
    margin: auto 5px;   // <-- This is responsible for vertical alignment
    background-color: green;   
}

The .innerDiv's margin must be in this format: margin: auto *px;

[Where, * is your desired value.]

display: inline-flex is supported in the latest (updated/current version) browsers with HTML5 support.

It may not work in Internet Explorer :P :)

Always try to define a height for any vertically aligned div (i.e. innerDiv) to counter compatibility issues.