常规的几种居中方案
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
width: 500px;
height: 500px;
background: grey;
/* position: relative;/**父元素为相对定位,居中基础01*/
/*居中方案4，flex使用新版本*/
/*display: flex;/*给父元素设置display*/
/*justify-content: center;/*水平居中*/
/*align-items: center;/*垂直居中*//*/*/
/*居中方案5.flex使用老版本，这个方案不需要给父元素设置相对定位，子元素设置绝对定位*/
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
}
#wrap .box{
width: 200px;
height: 200px;
background: pink;
/*position: absolute;*//*子元素为绝对定位 居中基础02*/
/*top: 50%;
left: 50%;
transform: translate(-50%,-50%);居中方案3*/
/*top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100PX;居中方案2*/
/*top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;居中方案1*/
}
</style>
</head>
<body>
<div id="wrap">
<div class="box">
</div>
</div>
</body>
</html>
