第一种方法:
div.box{
weight:200px;
height:400px;
<!--把元素变成定位元素-->
position:absolute;
<!--设置元素的定位位置，距离上、左都为50%-->
left:50%;
top:50%;
<!--设置元素的左外边距、上外边距为宽高的负1/2-->
margin-left:-100px;
margin-top:-200px;
}
兼容性好;缺点:必须知道元素的宽高
第二种方法：
div.box{
weight:200px;
height:400px;
<!--把元素变成定位元素-->
position:absolute;
<!--设置元素的定位位置，距离上、左都为50%-->
left:50%;
top:50%;
<!--设置元素的相对于自身的偏移度为负50%(也就是元素自身尺寸的一半)-->
transform:translate(-50%,-50%);
}
这是css3里的样式;缺点:兼容性不好，只支持IE9+的浏览器
第三种方法
div.box{
weight:200px;
height:400px;
<!--把元素变成定位元素-->
position:absolute;
<!--设置元素的定位位置，距离上、下、左、右都为0-->
left:0;
right:0;
top:0;
bottom:0;
<!--设置元素的margin样式值为 auto-->
margin:auto;
}
兼容性较好，缺点:不支持IE7以下的浏览器
第四种方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
600px;
height: 800px;
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
}
.child1{
200px;
height:200px;
background-color: red;
}
</style>
</head>
<body>
<div class="container clearFix">
<div class="child1">child1</div>
</div>
</body>
</html>
缺点:兼容性不好，使用记得加前缀