Top: 50% не работает CSS

Question

Я делаю сайт, и я пытаюсь центрировать текст, но я не знаю, что верх не работает. Это работает, если я использую что-то вроде этого:

up:25px; 

Но это не работает, когда я хочу использовать это:

up:50%; 

Можете ли вы мне помочь? Это мой код:

.absolute{ 
 
    position:absolute; 
 
} 
 

 
.relative{ 
 
    position:relative; 
 
} 
 

 
.white{ 
 
    background-color:white; 
 
} 
 

 
#menu-title{ 
 
    width:300px; 
 
    z-index:5; 
 
    top:50%; 
 
    left:calc(50% - 150px); 
 
    top:calc(50% - 2.5em); 
 
}

<div class='relative' id='menu'> 
 
     <div class='absolute white' id='menu-title'> 
 
     <h2 >Menu</h2> 
 
     </div> 
 
</div>

Answer 1

Вы должны использовать положение: фиксированный , а также зависит от размера текста, который вы можете переместить его точно в центре с преобразованием

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

надеюсь, что поможет

Answer 2

Учитывая, что вы хотите центрировать <h2> в <div> с идентификатором «menu-title», у вас есть несколько способов сделать это.

Если вы хотите использовать верхнюю свойство сначала нужно определить позицию фиксированной, как это:

#menu-title { 
    position: fixed; 
    top: 50%; 
} 

Другой способ сделать это состоит в использовании полей:

#menu-title { 
    margin-top: 100px; 
} 

Вы всегда можете изменить px.

Answer 3

Сделать position:fixed

.absolute{ 
 
    position:fixed; 
 
} 
 

 
.relative{ 
 
    position:relative; 
 
} 
 

 
.white{ 
 
    background-color:white; 
 
} 
 

 
#menu-title{ 
 
    width:300px; 
 
    z-index:5; 
 
    top:50%; 
 
    left:calc(50% - 150px); 
 
    top:calc(50% - 2.5em); 
 
}

<div class='relative' id='menu'> 
 
     <div class='absolute white' id='menu-title'> 
 
     <h2 >Menu</h2> 
 
     </div> 
 
</div>

Answer 4

Прежде всего ... это работает, только не так как вы ожидали. CSS top:calc(50% - 2.5em), относится к первому элементу предка POSITIONED. В вашем случае это относительный (родительский) элемент с id="menu". Высота этого элемента равна 0. Поэтому он работает так, как должен, но не так, как вы ожидали.

Возможно, вы ожидали, что меню имеет определенную высоту. Это не так, потому что его единственный дочерний элемент (div-menu-div) позиционируется как абсолютный. Абсолютные позиционированные элементы не растут родителями.

Скорее всего, вы ожидали, что заголовок будет располагаться относительно высоты окна просмотра, а не относительно его родителя.

---

Есть три способа позиционируют в меню заголовок относительно высоты видового экрана:

Решения 1. Удалите относительное позиционирование от родительского

Это делают родитель положение статическое (не позиционируется), а первый позиционированный элемент предка становится окном просмотра. Видовой порт имеет прирост по 100%. Поэтому это решение работает.Рабочий пример этого решения можно найти здесь: http://codepen.io/anon/pen/bBLZva

Решения 2. Дайте родительские 100% высоты

При удалении относительного позиционирования от предка (ов) не вариант, вы можете дать родительская высота 100%. Это, однако, не является прямой задачей. Просто добавить CSS height: 100% к родительскому недостаточно. Высота меню div зависит от высоты его родительского элемента, а не от высоты окна просмотра. Поэтому вам нужно явно установить родительские настройки на 100% (высота видового экрана). Этого можно добиться, добавив: body,html {height: 100%;} в CSS. Рабочий пример этого решения можно найти здесь: http://codepen.io/anon/pen/XNZGOv

Решения 3. Используйте положение фиксированного

Знайте, что position: fixed принципиально отличается от position: absolute и имеет проблемы совместимости на старых прошивке и Android версии (акции браузер) , Однако это МОЖЕТ привести к ожидаемому поведению. Это можно объяснить тем, что «position: fixed» подразумевает позиционирование относительно окна просмотра (а не для родителя). Вы должны использовать позицию, зафиксированную на самом титуле. Рабочий пример этого решения можно найти здесь: http://codepen.io/anon/pen/PbQgpB