如何水平居中响应式 div？答案

【问题标题】：how to horizontally center a responsive div?如何水平居中响应式 div？
【发布时间】：2017-04-01 01:51:32
【问题描述】：

尝试将包含响应式 AdSense 代码的 div 居中。

示例：

<div class="wrapper">
    <div class="adsense">adsense code here</div>
</div>

如果我输入广告的精确尺寸，我可以将 div 居中。所以 728x90 是我想要的最大值。目前我有一个 img 作为临时位置，它工作正常。问题是如果我输入精确的 px 则它不会响应。

有什么想法吗？

好的，这是我的实际代码...

<section class="main-content">
            <div class="top-banner">
                <img src="img/ad_top.jpg">
            </div>
</section>

（img 是记事本++的占位符）

.main-content {
    float: left;
    width: 75%;
}

.top-banner {
    margin:0 auto;
}

这只是将 img 放在左侧而不是居中。

【问题讨论】：

【解决方案1】：

你在说什么？水平居中是使用margin: 0 auto; 完成的，容器的大小无关紧要。

【讨论】：

当然可以。这是重点。但是如果你不使用某种宽度设置，它将是 100% 宽，这可能不是你想要的。因此，使用边距，但也使用最大宽度（您可以容忍的绝对最大值）和最小宽度的最小广告尺寸。除了px，您还可以在许多其他测量值中设置宽度

【解决方案2】：

你怎么看这个？：

.wrapper{
  width:100vw;
  border:1px solid red;
}

.adsense{
  border:1px solid black;
  width:80%;
  margin:0 auto;
}

【讨论】：