html - 如何在这种复杂的 float 广告情况下使 居中对齐

Question

我知道有很多人问 div 居中对齐问题。但我尝试了大多数解决方案，但在我的情况下似乎行不通。抱歉，我不得不在这里问。我在我的网站上创建了 float 广告 http://tacfeed.com使用以下 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 FOR SMALL SCREEN SIZES - COVERS COMMON MOBILE DEVICES, PHONES/TABLETS...
*/

@media only screen and (max-width: 1023px) {

.adcontainer {
  display: none; 
}

#responsive-adsense{
  display: none;
} 

}


@media only screen and (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 only screen and (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 only screen and (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 only screen and (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 the css for mobile devices */  
@media only screen and (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 your custom styles in this file instead of style.css so it 
is easier to update the theme. Simply copy an existing style 
from style.css to this file, and modify it to your liking. 

When you update your theme, backup this file and re-add it after.
*/

/* Global */
.mystyle {}


/* Tablet - 800px, 768px & 720px */
@media only screen and (min-width: 720px) and (max-width: 800px) {
    .mystyle {}
}


/* Mobile - 480px & 320px */
@media only screen and (max-width: 719px) {
    .mystyle {}
}


/* Mobile - 320px */
@media only screen and (max-width: 479px) {
    .mystyle {}
}

这是页脚处的 HTML 代码，在 .

<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>

现在，我遇到了两个问题。首先，广告在纵向模式下居中对齐，但如果我将 iPhone 或 Android 手机旋转到横向模式，它不会居中对齐。我尝试使用“vertical-align”、“margin”、“float”，但似乎都不走运。

其次，广告没有对齐到屏幕的最底部。您可以尝试在手机上访问我们的网站 tacfeed.com。您可以看到底部区域至少还剩 1 像素。

如有任何帮助或建议，我们将不胜感激。

Answer 1

似乎人们不知道这种将事物定位到中心的解决方案...您总是认为解决方案需要很复杂才能工作，但您可以使用 CSS 做到这一点并且它在所有浏览器上都支持...

要垂直对齐使 div 居中，您只需添加:

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

水平:

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

现在，绝对中心:

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

+更新AND，这是一个jsfiddle展示它/它是如何工作的

++更新此外，这是一个更新，因为现在您的广告是 position:absolute，您可以向其添加 bottom:0，它会固定在底部，没有像素之间。

+++更新还有一个jsfiddle显示将其对齐到中心并使其粘在底部的确切方法