How do I get my divs to be exactly centered?

I'm new to web development and I'm making a website for my friend. A ll I want to do is have their coverart over their soundcloud playlist and have both of these divs the same size and centered vertically and horizontally on the page. I've searched all over google and stackoverflow but none of the answers have been working for me. The divs continue to be shown in the bottom right of the page. I just can't seem to get it right.

   
    #playlist {
 		position: absolute;
 		top:50%;
 		left:50%;
 		width:500px;
  		height:500px;
  		margin-top: -250px
  		margin-left: -250px;
  		z-index:1;
  		margin: 0 auto;
}

	#artwork {
		position:absolute;
		top:50%;
		left:50%;
		width:500px;
  		height:500px;
  		margin-top:-250px;
  		margin-left -250px;
		z-index:2;
		margin: 0 auto;
        background-color:red; /*only to show hover*/ 
	
}

	#artwork:hover {
	opacity:0;
}

	#container{
	
   position: relative;
     height:500px;
     width:500px;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
}

<!doctype html>
<html>
  <head>
    <title>VOUDOUX</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>

  <body style="background-color:black">

    <div id="container">

		<div id="playlist">

    		<iframe width="100%" height="100%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/125549903&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>
    
		</div>

		<div id="artwork"><img src="images/Vices2.jpg" alt="coverart" style="width:100%;height:100%;"></div>


    </div>

  </body>
</html>

Solution

Based off of Daniel D's answer and your comment to his answer.

I've removed the margin: 0 auto from both #playlist and #artwork in favor of:

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

Also by setting #container to 100% width and height of the body you can center the playlist and artwork elements inside the entire page. Don't forget to set the width and min-height of html,body or #container won't know what to take up 100% of!

To see the best results you'll need to run the snippet in Full Page mode.

#playlist {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 500px;
  z-index: 1;
  transform: translateX(-50%) translateY(-50%);
}
#artwork {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 500px;
  z-index: 2;
  transform: translateX(-50%) translateY(-50%);
  background-color: red;
  /*only to show hover*/
}
#artwork:hover {
  opacity: 0;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
#container {
  position: relative;
  width: 100%;
  height: 100%;
}

<body style="background-color:black">

  <div id="container">

    <div id="playlist">

      <iframe width="100%" height="100%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/125549903&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>

    </div>

    <div id="artwork">
      <img src="images/Vices2.jpg" alt="coverart" style="width:100%;height:100%;">
    </div>


  </div>

</body>