Как горизонтально центрировать абсолютный позиционированный элемент внутри div ширины 100%?

В приведенном ниже примере #logo позиционируется абсолютно, и мне нужно, чтобы он был расположен по горизонтали в пределах #header. Обычно я делал margin:0 auto для относительно позиционированных элементов, но я застрял здесь. Может ли кто-нибудь показать мне путь?

JS Fiddle: http://jsfiddle.net/DeTJH/

HTML

<div id="header">
    <div id="logo"></div>
</div>

CSS

#header {
    background:black;
    height:50px;
    width:100%;
}

#logo {
    background:red;
    height:50px;
    position:absolute;
    width:50px
}

Ответы

Ответ 1

Если вы хотите выровнять центр по левому атрибуту.
То же самое для верхнего выравнивания, вы можете использовать margin-top: (width/2 вашего div), концепция одинаков с левым атрибутом.
Важно установить элемент заголовка в положение: relative.
попробуйте следующее:

#logo {
    background:red;
    height:50px;
    position:absolute;
    width:50px;
    left:50%;
    margin-left:-25px;
}

DEMO

Если вы не хотите использовать вычисления, вы можете сделать это:

#logo {
  background:red;
  width:50px;
  height:50px;
  position:absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

DEMO2

Ответ 2

Вам необходимо назначить значения left и right свойства 0 для margin: auto для центровки логотипа.

Итак, в этом случае:

#logo {
  background:red;
  height:50px;
  position:absolute;
  width:50px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

Вы также можете установить position: relative для #header.

Это работает, потому что при установке left и right в ноль будет горизонтально растягиваться абсолютно позиционированный элемент. Теперь магия происходит, когда margin установлен на auto. margin занимает все дополнительное пространство (одинаково с каждой стороны), оставляя содержимое до указанного width. Это приводит к выравниванию по центру.

Ответ 3

Не удалось использовать calc в ответах, что является более чистым решением.

#logo {
  position: absolute;
  left: calc(50% - 25px);
  height: 50px;
  width: 50px;
  background: red;
}

Работает в большинстве современных браузеров: http://caniuse.com/calc

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

Ответ 4

По моему опыту, лучший способ - right:0;, left:0; и margin:0 auto. Таким образом, если div является широким, вам не помешает left: 50%;, который будет компенсировать ваш div, что приведет к добавлению отрицательных полей и т.д.

DEMO http://jsfiddle.net/kevinPHPkevin/DeTJH/4/

#logo {
    background:red;
    height:50px;
    position:absolute;
    width:50px;
    margin:0 auto;
    right:0;
    left:0;
}

Ответ 5

вот лучший практический метод, чтобы центрировать div как абсолютную позицию

DEMO FIDDLE

code -

#header {
background:black;
height:90px;
width:100%;
position:relative; // you forgot this, this is very important
}

#logo {
background:red;
height:50px;
position:absolute;
width:50px;
margin: auto; // margin auto works just you need to put top left bottom right as 0
top:0;
bottom:0;
left:0;
right:0;
}

Ответ 6

Легко, просто оберните его в соответствующую коробку:

<div class="relative">
 <div class="absolute">LOGO</div>
</div>

Относительное поле имеет запас: 0 Авто; и, что важно, ширина...