如何让块级元素在页面中上下居中

.middle{
	width: 400px;
        height:160px;
	position: absolute;
	margin-left: -200px;
	margin-top: -80px;
	top: 50%;
	left: 50%;
	display: block;
	z-index: 2000;
	border: 1px solid #006699;
}

原理是这样的：因为这个 块元素是绝对定位position: absolute。首先你要知道“绝对定位”的概念：它是以最近一个已经定位的祖先为基准进行定位，如果没有就以屏幕定位！在这里（屏幕大小或祖先元素对于它来说就是100%）；top: 50%，就是在距屏幕上方或祖先元素50%，left: 50%，就是在距屏幕左方或祖先元素50%，因为它是以『左上角』为基准偏移的，它现在距离左边是：50%+400px，这个块的左上角在屏幕的中间，但是这个 块元素不在屏幕中间，所以 margin-left: -200px;把它想左边拉回一半，它就在屏幕中间了！margin-top: -80px;和上面的原理一样。往上拉回去一半。。