Центр по горизонтали и вертикали страницы IE 6+

Question

Я пытаюсь центрировать 1 #div поле с двумя маленькими #divs внутри него, чтобы быть точно посередине экрана / страницы - в идеале во всех разрешениях и IE 6 + Каков наилучший подход?

margin:0 auto; 

, кажется, делает трюк по горизонтали, но как насчет по вертикали?

Answer 1

Если вам известен размер элемента, который вы хотите центрировать, вы можете установить следующий CSS для его центрирования по горизонтали и вертикали:

#centered {
    position   : absolute;
    left       : 50%;
    top        : 50%;
    width      : 150px;
    height     : 200px;
    margin     : -100px 0 0 -75px;/*set the left and top margins to the negative of half the element's width and height (respectively)*/
    background : #000;
}

Обратите внимание, что родительский элемент должен иметь position значение, отличное от static:

#container {
    position : relative;
    width    : 100%;
    height   : 100%;
    border   : 1px solid #000;
}

Вот jsfiddle: http://jsfiddle.net/jasper/rcN3P/

P.S. Я проверил, и это работает в I.E. 6.

Answer 2

Я только что прочитал эту статью о css-хитростях по центрированию, она дает интересный подход с использованием псевдоэлементов, но вы могли бы так же легко добавить эти элементы в разметку (это не будет семантическим, но это будет работать).

http://css -tricks.com / 14745-центрирование в неизвестности /