The reason of this alignment technique on css

I've got a question over here:

I'm new with css, and I've been searching online about horizontal and vertical alignment techniques and I found plenty of them. However, given that I finished my first css and html course and the next step is responsive design I wanted to lear to work with % instead of exact units which led me to this technique:

top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);

I know that with absolute positioned elements the top, bottom, right and left properties set space between the element and the edge of its ancestor or father if there's one. In the technique they put the element 50% below and 50% to the left which is logical if the intention is to center horizontally and vertically the element, but why the transform property that is used to rotate, scale, move elements is used with negative values??.

Hope you can explain this for me, thank you for your time.

Here's my code:

.container {
  height: 700px;
  display: block;
  width: 100%;
  height: 700px;
  text-align: center;
  overflow: hidden;
 }
 
 .container img{
  background-size: cover;
}

.container > h1 {
    font-size: 72px;
    position: absolute;
    color: white;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }

<div class="container">
  <h1>Enjoy This Magical Experience</h1>
  <img src="http://ift.tt/2r0TTyK"/>
</div>