网页上有一个黄色方框，固定宽高。
7.jpg
整个页面代码如下
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div></div>
<style>
div{
width: 800px;
height: 200px;
background-color: yellow;
position: absolute;
}
</style>
</body>
</html>
如何让黄色方框居中呢？先让它距离左边缘和上边缘50%。
<style>
div{
left: 50%;
top:50%;
}
</style>
8.jpg
这时可以看到，方框的左上角顶点在宽高50%的位置。这时需要把它往左、往上偏移。
偏移多少合适呢？方框高度的一半和宽度的一半。于是
<style>
div{
margin:-100px 0 0 -400px;
}
</style>
另外，也可以这么写
<style>
div{
transform:translate(-50%,-50%);
}
</style>
9.jpg
完成
