Da Bomb!!! (Provided you don't care about IE8)

Use this method if you do not need to support IE8, since this method uses CSS Transform. This works when the size of the element is unknown.

The cool trick about this method is the way percentages are used within the transform property. Most CSS percentages are calculated using the containing (parent) element, but for transform the final value is calculated based on the current element. So, when the element is moved using transform:translate(-50%, -50%); the element is move left half its width and up half its height.

.centeredMiddle {
	position:absolute;
	left:50%; /* Puts the top left corner of the box in the middle of the containing element */
	top:50%;

	/* Percentages as based on the current element, not the containing element. */
	-webkit-transform:translate(-50%, -50%); 
	transform:translate(-50%, -50%); 
}

<div style="position:relative"> <!-- Container that item should be centered in -->
	<div class="centeredMiddle">
		<h1>Centering Example</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies semper erat, a mattis risus pharetra vel. Curabitur tincidunt metus vel pulvinar maximus. Fusce lacinia velit quis diam condimentum egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras quis pellentesque augue. Donec eu tincidunt nisl. Nulla facilisis consequat nisl ac accumsan. Donec ac feugiat arcu, et vulputate ex. In tincidunt ex sem, ac porta turpis sodales ut. Suspendisse hendrerit, quam eget tristique consequat, mi lorem venenatis nulla, vel sodales elit eros ut leo. Pellentesque nisi magna, ultricies quis placerat at, tincidunt a enim. Curabitur vitae nibh ac lorem efficitur aliquet. Integer quis malesuada velit.</p>
	</div>
</div>

View Demo

Known Size

Option 1: Brute-force

Unfortunately, vertical centering in CSS is a lot more difficult than horizontal centering. If you know the exact height of your div (that is, you set it yourself), you can use absolute positioning to get it done.

div {
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -100px; /* half of div's height */
	height: 200px;
}

Option 2: More Elegant - no math needed

http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

.Absolute-Center {
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
}

Unknown Size

If you don't know the height, there are a few options (try the first one first):

Vertical-Align Using Ghost Element

A psuedo element is created which sets the height of the container. See this example.

HTML Tables

As painful as it is to say, using a table and the vertical-align property of table cells can get it done. If you'd like to explore other methods, the ThemeForest blog has a nice roundup of different methods.

CSS Tables

This article explains how display:table-cell can do the trick.

Here is another method using Flexbox.

/**
	* Vertical centering with Flexbox + margin fallback
	* Lea Verou & David Storey
	*/
html, body { height: 100%; }
body {
	width: 100%; /* needed for FF */
	margin: 0;
	
	/* Flexbox */
	display: box; display: flexbox;
	box-align: center; flex-align: center;
	box-pack: center; flex-pack: center;
}
div {
	padding: 1em 1.5em;
	
	/* Fallback to look decent w/out Flexbox */
	max-width: 10em;
	margin: 1em auto;
	
	/* Make it pretty */
	background: slategray;
	text-align: center;
	border-radius: .3em;
	color: #405060;
	font: bold 150% sans-serif;
	text-shadow: 0 2px 1px hsla(0,0%,100%,.2);
}