位置和可扩展性，如果窗口大小发生变化，徽标始终保持在中间答案

【问题标题】：Position and scalability, logo stays in the middle the whole time if change in window size位置和可扩展性，如果窗口大小发生变化，徽标始终保持在中间
【发布时间】：2014-06-02 16:06:25
【问题描述】：

无论屏幕尺寸如何，我都无法将图像准确定位在中间并保持在中间。这是 JSFiddle 的链接http://jsfiddle.net/hansmrls/MARkq/

<div class="logos"><img class='itunes' src="http://upload.wikimedia.org/wikipedia/en/0/0c/ITunes_11_Logo.png" alt="#"></div>

.logos img{
  position: absolute;
  height: 20%;
  top: 34%;
  left: 50%;
  display: inline-block;
  z-index: 998;
}

【问题讨论】：

可能复制到stackoverflow.com/questions/1776915/…
@user3700007 我推荐的方法对你有用吗？

标签： jquery html css

【解决方案1】：

尝试将此添加到您的 .logos img 课程中

margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

Working example.

left:50% 不起作用的原因是因为它使用 50% 作为起点并从那里开始计算位置 - 从左到右。

编辑：另一种方法 - 在考虑您的 height: 20%;（这也会影响宽度）的同时，计算图像水平尺寸并将其除以 2。将 margin-left 设置为该结果的负值。这样你只需要left:50%，但它的响应速度不是很好，而且对于不同大小的图像也不能正常工作。

【讨论】：

【解决方案2】：

我会选择这样的东西：

HTML：

<div class="logos">
  <img class="itunes" src="http://upload.wikimedia.org/wikipedia/en/0/0c/ITunes_11_Logo.png" alt="itunes icon"/>
</div>

CSS：

/* I guess you already have something like this for the html and body in your CSS */ 
html, body { margin: 0; height: 100%;}

.logos {    
    height: 100%;
    text-align: center;
    white-space: nowrap;
    overflow-x: hidden;
}

.logos:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;    
}

.logos img {    
    z-index: 998;
    display: inline-block;
    vertical-align: middle;    
    max-width: 100%;
    height: auto;
}

你有一个demo。

使用这种方法，您的图像将垂直和水平居中并且具有响应性。如果您需要较小的图像，只需拍摄较小的图像并节省一些字节。

【讨论】：