下面几个方法的html 代码
<div id="box">
<div id="div"> </div>
</div>
方法一：（只能用于已知宽高的div）；
兼容性：IE7+；
/* css代码：*/
#box{
position:relative;
}
#div {
height: 200px;
width: 200px;
/* 主要代码 */
position:absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
方法二：（不需要知道div宽高）
兼容性：IE8+
/* css代码*/
#box{
position:relative;
}
#div{
height: 200px;
width: 200px;
/* 主要代码 */
position: absolute;
top: 0;
botton: 0;
left: 0;
right: 0;
margin: auto;
}
方法三：（使用css3方法）
兼容性：IE9+；
/* css代码*/
#box{
position:relative;
}
#div{
height: 200px;
width: 200px;
/* 主要代码 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
方法四：（css3的弹性盒子-代码最少）
兼容性：IE10+
#box{
display: flex;
justify-content: center;
align-items: center;
}
方法五：（css3弹性盒子-IE不兼容）
#box{
display: flex;
}
#div{
margin: auto;
}
方法六：（利用table表格）
兼容性： IE8+
/* css代码*/
#table{
display: table;
}
#table-cell{
display: table-cell;
text-align: center;
vertical-align:middle;
}
#div{
diaplay:inline-block;
}
/* html代码 */
<div id="table">
<div id="table-cell">
<div id="div"> <div>
</div>
<div>
