Q:

Why is left:auto; right:auto not centering a div?

I am trying to create a image slider that needs to be centered horizontally. In order to make the height working I need to set the position of the slider to absolute. To center the slider I tried to set the left and right to auto like you see below.
#slider{
 position: absolute;
 width:80%;
 height:50%;
 left:auto;
 right:auto;
}

But this is not working.
I included a code snippet where you can see the rest of the code.
Can somebody also tell me why the height is not working without position:absolute;

$(document).ready(function(){
 $('.active').css('display','inline')
});
body{
 margin: 0px;
}
#slider{
    position:absolute;
 width:80%;
 height:50%;
 left:auto;
 right:auto;
}
#slider img{
 width:100%;
 height:100%;
 position: absolute;
 z-index: -5;
}
.active{
 z-index: 1;
 display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider">
  <img src="http://icanbecreative.com/res/AbstractBg/green_abstract-wide.jpg" data-slide="1" class="active"/>
  <img src="http://www.hdwallpapers3d.com/wp-content/uploads/2013/05           /3d-abstract-hd-wallpaper.jpg" data-slide="2"/>
  <img src="http://freewallpaperspot.com/wallpapers/abstract-wallpaper-hd-3.jpg" data-slide="3"/>
 </div>

A:

adding this will align it horizontally center
#slider {
 position: absolute;
 width: 80%;
 height: 50%;
 left: 50%;
 transform: translatex(-50%);
}

