CSS центральный элемент с позицией: относительный; - PullRequest
Новая
       37

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

57 голосов
/ 08 июля 2011

У меня есть вопрос для вас, CSS-гуру!

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

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

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

Ваша помощь будет ЦЕННО признательна.

Edit:

Вот код: 

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

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

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

Ответы [ 5 ]

35 голосов
/ 04 февраля 2018

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

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

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

25 голосов
/ 08 июля 2011

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

#parent {
    -webkit-box-align:center;
    -webkit-box-pack:center;
    display:-webkit-box;
}
12 голосов
/ 18 августа 2016

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

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

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

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

12 голосов
/ 08 июля 2011

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

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

0 голосов
/ 17 апреля 2019

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

#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>
...