title: AngularJS - Modal position -> center
body: <p>I would like to center my modal and the pictures within the modal, but atm I can only do it with a FIX position. If I do relative, my modal will go to the bottom of the page. I tried margin-left:auto; and margin-right:auto; but it doesn't work.
  Here is my website were you can see the final result: <a href="http://electronics.youcanlike.com/#/laptop/A0100004" rel="nofollow">http://electronics.youcanlike.com/#/laptop/A0100004</a></p>
  
  <p>(Click on the Big picture next to the 3 small picture to open the modal)</p>
  
  <p>Photo album within the modal, photo.html:</p>
  
  <pre><code>&lt;div class="modal-body"&gt;
  
      &lt;!-- slider container --&gt;
      &lt;div class="container slider"&gt;
  
          &lt;!-- enumerate all photos --&gt;
          &lt;img ng-repeat="photo in photos" class="slide" ng-swipe-right="showPrev()" ng-swipe-left="showNext()" ng-show="isActive($index)" ng-src="{{photo.src}}" /&gt;
  
          &lt;!-- prev / next controls --&gt;
          &lt;a class="arrow prev" ng-click="showPrev()"&gt;&lt;/a&gt;
          &lt;a class="arrow next" ng-click="showNext()"&gt;&lt;/a&gt;
  
          &lt;!-- extra navigation controls --&gt;
          &lt;ul class="thumb"&gt;
              &lt;li ng-repeat="photo in photos" ng-class="{'active':isActive($index)}"&gt;
                  &lt;img src="{{photo.src}}" alt="{{photo.desc}}" title="{{photo.desc}}" ng-click="showPhoto($index);" /&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
  
      &lt;/div&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p>Here is my modal.css</p>
  
  <pre><code>.modal-backdrop{
  position:fixed;
  top:0;right:0;bottom:0;left:0;
  z-index:1040;
  background-color:#000000;
  }
  
  .modal-backdrop.fade{
  opacity:0;
  }
  .modal-backdrop,.modal-backdrop.fade.in{
  opacity:0.8;
  filter:alpha(opacity=80);
  }
  
  .modal{
  position:fixed;
  top:0px;
  left:auto;
  right:auto;
  
  x position: relative;
  x top: 0px;
  x margin-top: 0px;
  x margin-left: auto;
  x margin-right: auto;
  
  z-index:1050;
  width:700px;
  background-color:#efefef;
  border:1px solid #999;
  border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  border-radius:6px;
  -webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);
  -moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);
  box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);
  -webkit-background-clip:padding-box;
  -moz-background-clip:padding-box;
  background-clip:padding-box;
  outline:none;
  }
  
  .modal.fade{
  -webkit-transition:opacity .3s linear, top .3s ease-out;
  -moz-transition:opacity .3s linear, top .3s ease-out;
  -o-transition:opacity .3s linear, top .3s ease-out;
  transition:opacity .3s linear, top .3s ease-out;
  top:-100%;
  }
  
  .modal.fade.in{top:0%;}
  .modal-header{padding:9px 15px;border-bottom:1px solid #eee;}
  .modal-header .close{margin-top:2px;}
  .modal-header h3{margin:0;line-height:30px;}
  
  .modal-body{
  max-height:600px;
  max-width:700px;
  margin-left: auto;
  margin-right: auto;
  x top: 0px;
  padding:15px;
  position:relative;
  overflow-y:auto;
  overflow: hidden;
  }
  
  .modal-form{margin-bottom:0;}
  
  .modal-footer{
  padding:14px 15px 15px;
  margin-bottom:0;
  text-align:right;
  background-color:#f5f5f5;
  border-top:1px solid #ddd;
  -webkit-border-radius:0 0 6px 6px;
  -moz-border-radius:0 0 6px 6px;
  border-radius:0 0 6px 6px;
  -webkit-box-shadow:inset 0 1px 0 #ffffff;
  -moz-box-shadow:inset 0 1px 0 #ffffff;
  box-shadow:inset 0 1px 0 #ffffff;*zoom:1;
  }
  
  .modal-footer:before,.modal-footer:after{display:table;content:"";line-height:0;}
  .modal-footer:after{clear:both;}
  .modal-footer .btn+.btn{margin-left:5px;margin-bottom:0;}
  .modal-footer .btn-group .btn+.btn{margin-left:-1px;}
  .modal-footer .btn-block+.btn-block{margin-left:0;}
  </code></pre>
  
  <p>Here is the photo album within the modal</p>
  
  <p>albumPhoto.css</p>
  
  <pre><code>.arrow {
  cursor: pointer;
  display: block;
  height: 32px;
  margin-top: -35px;
  outline: medium none;
  position: absolute;
  top: 50%;
  width: 32px;
  z-index: 5;
  }
  .arrow.prev {
  background-image: url("../media/icon/prev.png");
  left: 20px;
  opacity: 0.2;
  transition: all 0.2s linear 0s;
  }
  .arrow.next {
  background-image: url("../media/icon/next.png");
  opacity: 0.2;
  right: 20px;
  transition: all 0.2s linear 0s;
  }
  .arrow.prev:hover{
  opacity:1;
  }
  .arrow.next:hover{
  opacity:1;
  }
  
  .thumb {
  bottom: -4px;
  display: block;
  height: 48px;
  left: 0;
  margin: 0 auto;
  padding: 1em 0 0.8em;
  position: absolute;
  right: 0;
  text-align: center;
  width: 100%;
  z-index: 5;
  }
  .thumb li {
  border: 5px solid #AAAAAA;
  border-radius: 5px;
  cursor: pointer;
  display: inline-block;
  margin: 0 8px;
  position: relative;
  width: 50px;
  }
  .thumb li.active {
  border: 5px solid #00a1e0;
  x background: -webkit-linear-gradient(top, #00a1e0, #1575a5); 
  x background: -moz-linear-gradient(top, #00a1e0, #1575a5);  
  }
  .thumb li:hover {
  border: 5px solid #1575a5;
  }
  .thumb li img {
  width: 100%;
  }
  
  .slider {
  clear: both;
  
  border: 15px solid #FFFFFF;
  border-radius: 5px;
  height: 500px;
  margin: 20px auto;
  position: relative;
  width: 650px;
  
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
  -ms-perspective: 600px;
  -o-perspective: 600px;
  perspective: 600px;
  
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  }
  .slide { 
  x margin-top: 20px;
  x margin-bottom: 0px;
  x margin-right: auto;
  x margin-left: auto;
  x position: relative;
  
  position: absolute;
  top: 0;
  left: 40px;
  }
  .slide.ng-hide-add {
  opacity:1;
  
  -webkit-transition:1.5s linear all;
  -moz-transition:1.5s linear all;
  -o-transition:1.5s linear all;
  transition:1.5s linear all;
  
  -webkit-transform: rotateX(50deg) rotateY(30deg);
  -moz-transform: rotateX(50deg) rotateY(30deg);
  -ms-transform: rotateX(50deg) rotateY(30deg);
  -o-transform: rotateX(50deg) rotateY(30deg);
  transform: rotateX(50deg) rotateY(30deg);
  
  -webkit-transform-origin: right top 0;
  -moz-transform-origin: right top 0;
  -ms-transform-origin: right top 0;
  -o-transform-origin: right top 0;
  transform-origin: right top 0;
  }
  .slide.ng-hide-add.ng-hide-add-active {
  opacity:0;
  }
  .slide.ng-hide-remove {
  -webkit-transition:1.5s linear all;
  -moz-transition:1.5s linear all;
  -o-transition:1.5s linear all;
  transition:1.5s linear all;
  
  display:block!important;
  opacity:0;
  }
  .slide, .slide.ng-hide-remove.ng-hide-remove-active {
  opacity:1;
  }
  </code></pre>
  
  <p>And finally the controller:</p>
  
  <pre><code>webshopApp.controller('laptopDetailCtrl', function ( $scope, $routeParams, $http, $modal, $log) {
  var pNumber = {
    'partNumber' : $routeParams.partNumber
  };
  $http({
      url: 'http://electronics.youcanlike.com/phps/laptop/laptopQuery.php',
      method: "POST",
      data: pNumber,
      headers: {'Content-Type': 'application/x-www-form-urlencoded'}
  })
  .success(function (data) {
          $scope.laptop = data;
          $scope.partNumber = $routeParams.partNumber;
          $scope.mainImageUrl = data[0].picture1; //'http:\/\/www.electronics.youcanlike.com\/pics\/laptop\/A0100001_01.jpg';
  });
  
  $scope.setImage = function(imageUrl) {
    $scope.mainImageUrl = imageUrl;
  }
  
  
  
  
  
  $scope.user = {
      user: 'name',
      password: null
  };
  
  $scope.open = function () {
  
      $modal.open({
          templateUrl: 'myModalContent.html',
          backdrop: true,
          windowClass: 'modal',
          controller: function ($scope, $modalInstance, $log, user) {
  
              // Set of Photos
              $scope.photos = [
                  {src: 'foto/a.jpg', desc: 'Image 01'},
                  {src: 'foto/b.jpg', desc: 'Image 02'},
                  {src: 'foto/c.jpg', desc: 'Image 03'}
              ];
  
              // initial image index
              $scope._Index = 0;
  
              // if a current image is the same as requested image
              $scope.isActive = function (index) {
                  return $scope._Index === index;
              };
  
              // show prev image
              $scope.showPrev = function () {
                  $scope._Index = ($scope._Index &gt; 0) ? --$scope._Index : $scope.photos.length - 1;
              };
  
              // show next image
              $scope.showNext = function () {
                  $scope._Index = ($scope._Index &lt; $scope.photos.length - 1) ? ++$scope._Index : 0;
              };
  
              // show a certain image
              $scope.showPhoto = function (index) {
                  $scope._Index = index;
              };
  
              $scope.cancel = function () {
                  $modalInstance.dismiss('cancel');
              };
          },
          resolve: {
              user: function () {
                  return $scope.user;
              }
          }
      });
  };
  
  });
  </code></pre>