Центрирование DIV по вертикали и по горизонтали

Question

я создал лабиринт и я хочу, чтобы центрировать SMILY DIV («highlight_lose») в лабиринт («основной»)

#highlight_lose { 
    width: 550px; 
    height:550px; 
    position: absolute; 
    margin: 0 auto; 
    top: 50%; 
    bottom: 375px; 


} 

здесь скрипка ссылка: http://jsfiddle.net/uqcLn/30/

Answer 1

Новый ответ

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

#highlight_lose { 
    height: 300px; 
    width: 100%; 
    position: absolute; 
    top: 50%; 
    margin-top: -150px; 
} 
div.sad_smileyface { 
    width: 300px; 
    height: 100%; 
    position: relative; 
    margin: 0 auto; 
    ... 
    [your graphic styling code here] 
} 

Следует отметить, что я устанавливаю ширину содержащего div на 100% и центрирует ее по вертикали. Затем я центрировал дочерний элемент smileyface div горизонтально. Это не требуется, просто метод, который я сделал это. Если высота изменяется, отрегулируйте #highlight_lose, если изменения ширины, обновления sad_smileyface

Оригинал ответа

Если высота составляет по меньшей мере decalred (который у вас есть), установите родительский контейнер как position: relative (просто чтобы убедиться), вы должны иметь возможность использовать margin: auto; на вашем дочернем div. Это должно работать в кросс-браузере с IE 6.

Другие варианты включают в себя выполнение вашего метода, задав допустимую границу с отрицательной половиной высоты и ширины. margin: -275px -275px;.

Кроме того, модель Flexbox от CSS3 также исправит это, но сильно префикс и не поддерживается везде.

Answer 2

http://jsfiddle.net/uqcLn/34/

Вот новая обновленная версия, вы можете также установить маржу вместо преобразования для старых браузеров