JavaScript - 无论窗口大小如何，都可以修复图像

Question

图像移动取决于屏幕的大小，我想将其固定在顶部中间。我该怎么做？这是2个屏幕截图解释：

HTML：

<div class="logo"></div>

CSS：

.logo {
  background:url(../img/logo.png) no-repeat;
  position:absolute;
  display: inline-block;
  left:50%;
  top:30%;
  height:120px;  
  width:175px;
  margin:-115px 0px 0px -112px;
}

Answer 1

你可以使用翻译：

.logo {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    height:120px;                  
    width:175px;     
    background:url(../img/logo.png) no-repeat;
}

jsFiddle

Answer 2

您可以在CSS中使用calc功能。

调整窗口大小以查看其效果（全屏显示）。

＆＃13;

＆＃13;

.logo{
  position: absolute;
  width: 175px;
  height: 120px;
  top: 30%;
  left: calc(50% - (175px / 2)); /* 50% parent width - half_of_image_width */
  
  border: 1px solid red;
}

.container{
  position: absolute;
  width: 90%;
  height: 90%;
  
  border: 1px solid black;
}

＆＃13;

<div class="container">
  <div class="logo"></div>
</div>

＆＃13;

＆＃13;

＆＃13;