html - Bootstrap : Logo not centering on landing page

Question

我的网站登录页面有一张全屏背景图片，中间有我的 Logo 。该网站使用 Bootstrap 并且完全响应。 Logo 在我的浏览器窗口中垂直和水平对齐，并且在调整窗口大小时， Logo 正确地位于中心。但是，当在手机或平板电脑上查看时，图像背景图像会正确调整大小，但 Logo 不会停留在页面中央，而是位于屏幕右侧，一半被遮挡。

关于如何纠正这个问题的任何想法？网站登录页面已上线，您可以在 www.burnser.com 找到它

代码如下:

<img alt="full screen background image" src="img/bg.jpg" id="full-screen-   
background-image" /> 
<div class="centered">
<a href="work.html"><img src="img/home_logo.png" alt="BB Logo" width="200"   
height="137"></a>
</div>

这是我正在使用的 CSS:

#full-screen-background-image {
z-index: -999;
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}

.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}

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

Answer 1

在我的手机上看起来不错。尝试使用其他浏览器并尝试添加前缀 transform。

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

顺便说一句，1MB 的背景图片太大了。您应该模糊噪声以减小图像的大小。