演示代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="reset.css"/>
<style type="text/css">
#box{
width: 300px;height: 300px;background-color: #ccc;
margin: 100px auto;
}
.wyzx{
width: 300px;height: 300px;background-color: #f00;
/*
位移转换:
1，参考点（基点），在元素的中心点；
2，百分比是参考自身元素的百分比
*/
/* X轴：正往右，负往左 */
/* transform: translateX(50px); */
/* Y轴：正往下，负往上 */
/* transform: translateY(50px); */
/* transform: translateX(50%); */
/* transform: translateY(50%); */
/* 2D唯一简写，值1是X轴，值2是Y轴 */
transform: translate(50%,50%);
}
</style>
</head>
<body>
<!-- #box>.wyzx -->
<div id="box">
<div class="wyzx"></div>
</div>
</body>
</html>
