让一个div居于页面正中间的三种方法

1.

.div1{
	width: 100px;
	height: 100px;
	background: #eee;
	border: 1px solid #ccc;
	position: absolute;
	left: 50%;top: 50%;
	margin-left: -50px;
	margin-top: -50px;
}

这几行在#login_box中的目的是使其在浏览器中水平居中显示。（无论浏览器被如何拉伸，该login_box始终保持居中）

原理（对齐浏览器的中心点与#login_box的中心点，这样就使得.foot在浏览器中水平居中了）：
left:50%; 使div1 左边框顶点距离浏览器左边50% ，所以div1整体并不是位于浏览器中间，需要使用margin-left: -50px; 使div1向左移动50像素（div1自身宽度的一半）。这样box整体就位于浏览器中间了。
top: 50%; margin-top: -50px 的道理同上。

.div2{
    width: 200px;
    height: 200px;
    background: #eee;
    border: 1px solid rgb(204, 204, 204);
    position: absolute;
    left: 50%;top: 50%;
    transform: translate(-50%,-50%);
}

translate(-50%, -50%)，第一个值是指水平移动量，和tansform的translateX效果一样，第二个值那就是垂直方向偏移量，但为负数时，代表反方向移动。现在我们只需tanslate(-50%,-50%)就可以达到div既水平居中同时垂直居中。

2.

.div3{
    width: 300px;
    height: 300px;
    background-color: #eee;
    border: 1px solid #ddd;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}