Центрирование элемента с позицией: относительный

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

Как бы я центрировал несколько элементов с помощью position: relative как по вертикали, так и по горизонтали, когда я не буду знать размер родительского элемента div?

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

Вот код:

.OuterCase { 
  position  : absolute; 
  width     : 100%;  
  height    : 100%; 
  text-align: center;
}

.InnerItem  { 
   width  : 38px;
   height : 38px;
   display: inline-block;
}

У меня есть его для центрирования предметов по горизонтали; вертикаль становится немного неуловимой.

Ответ 1

Намного проще:

position: relative; 
left: 50%;
transform: translateX(-50%);

Теперь вы сосредоточены в родительском элементе. Вы можете сделать это и по вертикали.

Ответ 2

В качестве альтернативы вы также можете использовать CSS3 Flexible Box Model. Это отличный способ создать гибкие макеты, которые также могут быть применены к центру контента следующим образом:

#parent {
    -webkit-box-align:center;
    -webkit-box-pack:center;
    display:-webkit-box;
}

Ответ 3

Если у вас есть относительно (или иначе) позиционированный div, вы можете центрировать что-то внутри него с помощью margin:auto

Вертикальное центрирование немного сложнее, но возможно.

Ответ 4

Вы можете использовать calc для позиционирования элемента относительно центра. Например, если вы хотите поместить элемент 200px прямо из центра.. вы можете сделать это:

#your_element{
    position:absolute;
    left: calc(50% + 200px);
}

Не забывайте об этом

При использовании знаков + и - у вас должно быть пустое место между знаками и цифрами, но при использовании знаков * и / нет необходимости в пробеле.

Ответ 5

Другой вариант - создать дополнительную обертку для центрирования элемента по вертикали.

#container{
  border:solid 1px #33aaff;
  width:200px;
  height:200px;
}

#helper{
  position:relative;
  height:50px;
  top:50%;
  border:dotted 1px #ff55aa;
}

#centered{
  position:relative;
  height:50px;
  top:-50%;
  border:solid 1px #ff55aa;
}

<div id="container">
  <div id="helper">
    <div id="centered"></div>
  </div>
<div>