在平时，我们经常会碰到让一个div框针对某个模块上下左右都居中（水平垂直居中），其实针对这种情况，我们有多种方法实现。
方法一:
绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;）
图片展示：
代码如下：
div{background:red;position: absolute;left:50%;top:50%;transform: translate(-50%, -50%);
}
方法二:
绝对定位方法：确定了当前div的宽度，margin值为当前div宽度一半的负值
图片展示： 如方法一的图片展示
代码如下：
div{width:600px;height: 600px;background:red;position: absolute;left:50%;top:50%;margin-left:-300px;margin-top:-300px;
}
方法三：
绝对定位方法：绝对定位下top left right bottom 都设置0
图片展示： 如方法一的图片展示
代码如下：
<!--html--><div class="child">我是子级</div>
/**css**/
div.child{width: 600px;height: 600px;background: red;position:absolute;left:0;top: 0;bottom: 0;right: 0;margin: auto;
}
方法四:
flex布局方法：当前div的父级添加flex css样式
展示图如下：
代码如下：
<!--html--><div class="box"><div class="child">child</div>
</div>/**css**/.box{height:800px;-webkit-display:flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;border:1px solid #ccc;
}
div.child{width:600px;height:600px;background-color:red;
}
方法五:
table-cell实现水平垂直居中: table-cell middle center组合使用
展示图如下：
代码如下：
<!--html--><div class="table-cell"><p>我爱你</p>
</div>/**css**/.table-cell {display: table-cell;vertical-align: middle;text-align: center;width: 240px;height: 180px;border:1px solid #666;
}
方法六:
绝对定位：calc() 函数动态计算实现水平垂直居中
展示图如下：
代码如下：
<!--html-->
<div class="calc"><div class="child">calc</div>
</div>
/**css**/
.calc{position: relative;
border: 1px solid #ccc;
width: 400px;
height: 160px;
}
.calc .child{position: absolute;
width: 200px;
height: 50px;left:-webkit-calc((400px - 200px)/2);top:-webkit-calc((160px - 50px)/2);left:-moz-calc((400px - 200px)/2);top:-moz-calc((160px - 50px)/2);left:calc((400px - 200px)/2);top:calc((160px - 50px)/2);
} 
