<html lang="en">
<head>
<meta charset="UTF-8">
<title>div居于页面正中间</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
background-color: #EAEAEA;
}
div{
width: 200px;
height: 200px;
background-color: #1E90FF;
}
.center-in-center{
<!-- 第一种：-->
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
<!-- 第二种-->
<!-- position: absolute;-->
<!-- top: 50%;-->
<!-- left: 50%;-->
<!-- -webkit-transform: translate(-50%, -50%);-->
<!-- -moz-transform: translate(-50%, -50%);-->
<!-- -ms-transform: translate(-50%, -50%);-->
<!-- -o-transform: translate(-50%, -50%);-->
<!-- transform: translate(-50%, -50%);-->
}
</style>
</head>
<body>
<div class="center-in-center"></div>
</body>
</html>```
图片显示：
