<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
article {
border: solid 2px black;
box-sizing: border-box;
width: 400px;
height: 400px;
position: relative;
}
div {
height: 200px;
width: 200px;
border: solid 2px yellowgreen;
box-sizing: border-box;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<article>
<div></div>
</article>
</body>
</html>
Element is not set at the beginning movement, perform left: 50%; top: 50%; at the top left and right movement of the element width and half the height at the parent article respectively, and then performs transform: translate (-50%, -50%); this time the elements were left in the half and move themselves up the width and height, so that just happened to be centered, so to see others did, to understand today why do the project before.
