块级元素 垂直居中

第一种方法 ：

.demo{ height:400px; position:relative;}

.d{ width:200px; height:200px; position: absolute; left: 50%; top: 50%; margin-top: -100px;/* 高度的一半 */ margin-left: -100px;/* 宽度的一半 */ background:red;}

<div class="demo">
     <div class="d"></div>
</div>

这种写法 比较常用 

第二种方法 ：

.demo{ height:400px; position:relative;}


/* CSS3 兼容问题 优势:不需要知道元素宽度  */
.transform{ width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);/* 50%为自身尺寸的一半 */ background:green;}

<div class="demo">
     <div class="transform"></div>
</div>

PS: 这种写法的好处是  无需知道 元素的 高度和宽度。

第三种方法 ：

.demo{ height:400px; position:relative;}

.position{width: 200px; height: 200px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; /* 有了这个就自动居中了 */  background:black;}	
	

<div class="demo">
     <div class="position"></div>
</div>