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

Происходит то, что на маленьком экране 50% места слева от логотипа, сам логотип занимает примерно 60% экрана (так как экран очень маленький), и вы остаетесь с переполнением право.

Вы можете использовать функцию CSS calc(), чтобы узнать РЕАЛЬНОЕ количество места, необходимое для центрирования логотипа: руководство по css calc

Какова ширина вашего логотипа? (измените это на ФАКТИЧЕСКУЮ ШИРИНУ.. Я просто делаю предположение здесь) width: 300px;
Какова общая ширина экрана компьютера или телефона? 100%
Таким образом, пространство слева от идеально центрированного логотипа должно быть: (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 -> нажмите "проверить элемент", а затем нажмите "вычисленные" стили, чтобы увидеть его точную ширину. Затем, вернувшись в свой код, не забудьте изменить left: calc(50% - 150px); чтобы отразить ширину, которую вы узнали. Это должна быть ширина элемента в разделе "вычисленные стили", деленная на два.

Answer 2

Пытаться:

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