div水平垂直居中
在写前端页面时，常常需要居中一个块级元素，如div的居中。水平居中只需margin:auto;一行代码即可，那么，如何才能使得div在父块级元素中同时水平、垂直居中呢？
开始之前，大家应该充分理解css中绝对定位和相对定位的概念
这篇博文写得非常好：CSS相对定位和绝对定位详解
在此补充一下，当div使用绝对定位时（position:absolute），会往上查找祖先元素，直到某个祖先元素有position属性且值为relative或position，然后以祖先元素的左上角为基点，再设置top，right，bottom，left属性。具体解释可查看上面链接。
看下简陋的最终效果：
实现思路
1.使用绝对定位，相对对位功能，使得子div左上角的点位于父div的中心
2.使用transform属性使子div向左上角编译长宽一半的距离
实现代码及注释
<!DOCTYPE html>
<html>
<head>
<title>
div
</title>
<style type="text/css">
.div1 {
background-color: gray; /* 父div背景色 */
height: 500px;
width: 600px;
margin: auto;
position: relative;
}
.div2 {
background-color: red;
height: 200px;
width: 200px;
position: absolute; /* 当父div设置了相对对位后，这里再设置绝对定位，即可另子div相对于父div定位 */
top: 50%; /* top,left是与绝对定位配套的属性，以div左上角为动点，令它距离父div顶端和左端长度一半 */
left: 50%;
/**
专注于div2左上角的点，可看作以它为原点建立直角坐标系（x轴正方向向右，y轴正方向向下），
然后div2先向左移动自身宽度一半的距离（从-50%看出），再向上移动自身宽度一半的距离
*/
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
