CSS：如何让元素在页面中水平垂直居中？

如何让元素在页面中水平垂直居中：

方法一：

html代码：

<div class="center"></div>

CSS代码：

.center{
	width: 400px;
	height: 200px;
	background-color: #ccc;
	position: absolute;
	left: 0px;top: 0px;right: 0px;bottom: 0px;
	margin: auto;
}

显示结果：无论如何改变div的宽度和高度，该元素都会在页面中水平垂直居中

（未完待续……）