Div 以桌面为中心，但在移动设备上固定在右侧。发生了什么？

Question

我的徽标有问题，我想在主页上居中对齐。它在桌面上运行良好，但当我在移动设备上查看时，它会立即固定在右侧并掉出框架。

这是背景图片：

#homebg { 
  background: url(images/back.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

这是徽标：

#logo {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

我的主要目标是让徽标在所有平台上居中对齐。任何帮助都会很棒！

Answer 1

尝试：

margin-left: 50%;
margin-right: 50%;

Answer 2

发生的事情是在小屏幕上，50% 是徽标左侧的 space，徽标本身占据了屏幕的 60%（因为屏幕太小了）剩下的是右边的溢出。

您可以使用 CSS calc() 函数找出使徽标居中所需的 space 的真实数量：css calc tutorial

您的徽标的宽度是多少？（将其更改为实际宽度..我只是在这里猜测）宽度：300px;
计算机或 phone 屏幕的总宽度是多少？ 100%
因此，完美居中徽标左侧的 space 应为：(100%-300px)/2
解方程得到：50%-150px

只需将 CSS 代码中的那一行修改为：

left: calc(50% - 150px);

-（减号）周围的空格很重要

结果 CSS 应该是：

#logo {
    position: fixed;
    top: 50%; /*wait a second .. you want it centered vertically, too?? */
    left: calc(50% - 150px); /* 50% minus "the width of your logo divided by 2" */
    /* transform: translate(-50%, -50%); */ /* what's this line for? you dont need this line for positioning ... */    }

如果您不知道 #logo 有多宽，并且需要计算出确切的浏览器数量，请右键单击 chrome 中的该元素 -> 单击 "inspect element"然后单击 "computed" 样式以查看它的确切宽度。然后，返回您的代码，确保更改 left: calc(50% - 150px); 以反映您发现的宽度。它应该是 "computed styles" 部分中元素的宽度 除以二 。

Div 以桌面为中心，但在移动设备上固定在右侧。发生了什么？

Div centred on desktop but fixed to right on mobile. What's happening?

css

alignment