垂直居中 小记

	
		/*   top:50%   margin-top:-35px    */
			.wrap{
				height: 200px;
				width: 200px;
				border: 4px solid #BBBBBB;
				position: relative;
			}
			.inner{
				position:absolute;
				height: 70px;
				width: 120px;
				background-color: #FFBFBF;
				top:50%;
				margin-top:-35px;			
			}

<div class="wrap">
    <div class="inner"></div>
</div>
//==============================================================================//==============================================================================		
	
		/* td{vertical-align: middle;}*/
			td{
				vertical-align: middle;
				border: 4px solid #BBBBBB;
				height: 200px;
				width: 200px;
			}
			.tddiv{
				height: 70px;
				width: 120px;
				background-color: #FFBFBF;
			}
			
<table>
	<tr>
	   <td><div class="tddiv"></div></td>
	</tr>
</table>
//==============================================================================
//==============================================================================

		/*div { display:table; }
		  p{ display:table-cell; vertical-align:middle; }
		*/
			.wrap2{
				display:table;
				height: 200px;
				width: 200px;
				border: 4px solid #BBBBBB;
			}
			.inner2{
				display:table-cell;
				vertical-align: middle;
			}

<div class="wrap2">
	<p class="inner2">content</p>
</div>

//==============================================================================
//==============================================================================
			
		/*多一层。内 .hack 层 top:50%; 再让 .cnt 层相对自身向上提50%*/
			.wrap3{
				height: 200px;
				width: 200px;
				border: 4px solid #BBBBBB;
				position: relative;
			}
			.hack{
				position:absolute;
				height: 70px;
				width: 120px;
				background-color: #FFBFBF;
				top:50%;
			}
			.inner3{
				height: 70px;
				width: 120px;
				background-color: 	#82E0FF;
				position: absolute;
				top:-50%;
			
			}
<div class="wrap3">
	<div class="hack">
		<div class="inner3"></div>
	</div>
</div>

//参考自：http://sofish.de/1909