html - How to keep <div> align center in this complicated case for floating ad -

i know there lots of people asking div align center problem. tried solution , seems won't work in case. sorry have ask here. created floating ad @ site http://tacfeed.com using following css,

/* default stylesheet */ #close {   margin-left: auto;   margin-right: auto;     float:left;     display:inline-block;     padding:2px 5px; color:black;   background: #fff; }  #responsive-adsense {   display: none;  }  #responsive-adsense{   display: none; }    /* general media query small screen sizes - covers common mobile devices, phones/tablets... */  @media screen , (max-width: 1023px) {  .adcontainer {   display: none;  }  #responsive-adsense{   display: none; }   }   @media screen , (max-width: 899px) {  .adcontainer {    width: 100%;   height: auto;   position: fixed;   bottom: 0px;   display: block;   background: #fff;   color: #fff;   margin: 0 auto;   padding: 0px;  }  #responsive-adsense {   margin-left: auto;   margin-right: auto;  padding: 0px !important;   width: 728px !important;   display: block !important; margin:0; }  }   @media screen , (max-width: 767px) {  .adcontainer {  width: 100%;  height: auto;   position: fixed;  bottom: 0px;  display: block;  background: #fff;  color: #fff;  margin: 0 auto;  padding: 0px; }  #responsive-adsense {   margin-left: auto;   margin-right: auto;  padding: 0px !important;  width: 728px !important;  display: block !important;  margin:0; }  }   @media screen , (max-width: 599px) {  .adcontainer {   width: 100%;  height: auto;  position: fixed;  bottom: 0px;  display: block;  background: #fff;  color: #fff;  margin: 0 auto;  padding: 0px; }  #responsive-adsense {   margin-left: auto;   margin-right: auto;  padding: 0px !important;  width: 468px !important;  display: block !important;  margin:0px; }  }   @media screen , (max-width: 479px) {  .adcontainer {  width: 100%;  height: auto;   position: fixed;  bottom: 0px;  display: block;  background: #fff;  color: #fff;  margin: 0 auto;  padding: 0px; }  #responsive-adsense {   margin-left: auto;   margin-right: auto;  padding: 0px !important;  width: 320px !important;  display: block !important; margin:0px; }   }  /* here's css mobile devices */   @media screen , (max-width: 320px) {  .adcontainer {   width: auto !important;   padding: 0px !important;  height: 50px !important;  }  #responsive-adsense {   margin-left: auto;   margin-right: auto;  padding: 0px !important;  width: 320px !important;  display: block !important;  margin:0px; }  }  /*  add custom styles in file instead of style.css  easier update theme. copy existing style  style.css file, , modify liking.   when update theme, backup file , re-add after. */  /* global */ .mystyle {}   /* tablet - 800px, 768px & 720px */ @media screen , (min-width: 720px) , (max-width: 800px) {     .mystyle {} }   /* mobile - 480px & 320px */ @media screen , (max-width: 719px) {     .mystyle {} }   /* mobile - 320px */ @media screen , (max-width: 479px) {     .mystyle {} } 

and here html code @ footer, before end of .

<div class="adcontainer" style="background-color: rgba(255, 0, 0, 0)">  <div id="responsive-adsense"> <span id='close' onclick='this.parentnode.parentnode.parentnode.removechild(this.parentnode.parentnode); return false;'>[x]</span> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- mobileadfor2013 --> <ins class="adsbygoogle"      style="display:inline-block;width:320px;height:50px"      data-ad-client="ca-pub-2658894403753596"      data-ad-slot="4801520732"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div>  </div> </body> 

now, got 2 problems. first, ad align center in portrait mode, won't align center if rotate iphone or android phone landscape. tried use "vertical-align", "margin", "float" , seems no luck.

second, ad not align bottom of screen. can try visit our site tacfeed.com on mobile. can see there @ least 1 px left in bottom area.

any or advise appreciated.

it seems people don't know solution position things center...you think solution needs complicated in order work can css , has support on browsers...

to align verticaly center div need add:

position: absolute; left:0; right:0; margin: auto; 

horizontal:

position: absolute; top:0; bottom:0; margin: auto; 

and now, absolute center:

position: absolute; top:0; bottom:0; left:0; right:0; margin: auto; 

+update and, here jsfiddle show that/how works

++update also, comes update, since ad position:absolute, can add bottom:0 , stick bottom, no pixels in between.

+++update , jsfiddle show exact way of aligning center , make stick bottom