Div не подчиняясь «сверху» или «высота» стили

Question

Fiddle

У меня есть .panel DIV, который я создал, с некоторым содержанием в нем. Я хочу, чтобы он был центрирован как по вертикали, так и по горизонтали. Горизонтальный расчет, который я выполнил, используя margin:auto;, но я не могу заставить вертикальное центрирование работать.

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

.panel { 
    position:relative; 
    top:50%; 
    transform: translateY(-50%); 
} 

Положения устанавливаются на относительный, и он преобразуется вверх на 50% от его но верхняя часть остается на уровне 0%, и, таким образом, панель наполовину выключена. Кроме того, высота панели установлена ​​на уровне 95%, но она не подчиняется этому. Это не так важно - в конце я хочу, чтобы высота была автоматической, но я заметил, что это происходит, и полагал, что это может быть вызвано той же проблемой, которая препятствует правильной установке верха. Любая идея, что вызывает это?

Answer 1

Это потому, что вы используете единицы, основанные на процентах. Если вы хотите, чтобы элемент в центре относительно к окну, то body должен иметь высоту больше, чем его содержание (в данный момент, height из body элемента определяется на основе .panel элемента).

В этом случае, вы могли бы просто дать ему высоту окна просмотра:

Updated Example

body { 
    height: 100vh; 
} 

---

Вы можете абсолютно позиционировать элемент вместо этого.

Updated Example

.panel { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
} 

---

В качестве альтернативы, другой способ центрировать элемент по горизонтали/по вертикали можно было бы добавить top: 0; right: 0; bottom: 0; left: 0;, то так как height/width приведены, margin: auto будет эффективно центрировать элемент по горизонтали/вертикали ,

Updated Example

.panel { 
    position: absolute; 
    width: 95%; 
    height: 95%; 
    margin: auto; 
    top: 0; right: 0; 
    bottom: 0; left: 0; 
} 

---

Но поскольку width/height указаны с использованием единиц на основе процента, вы могли бы на самом деле использовать только центрировать элемент, используя top: 2.5%/left: 2.5%.

Updated Example

.panel { 
    position: absolute; 
    width: 95%; 
    height: 95%; 
    left: 2.5%; 
    top: 2.5%; 
} 

Answer 2

Родитель элементы имеют одинаковую высоту, как панель, которая, кажется, почему это не работает. Вы можете сделать панель абсолютно позиционированной, или вы можете добавить высоту к родительским элементам.

Updated Example

html, body { height: 100%; }