Как сделать резиновый слой в fixed/absolute четко по центру?

Question

[MADm]

Подскажите пожалуйстка как сделать резиновый слой в fixed/absolute четко по центру по вертикали и горизонтали. Нашел некий хак с 2 доп слоями и выставлением им right 50% right -50% но это не работает для центровки по вертикали.

Answer 1

[Kir ---]

#container {
    display: flex;
    position: absolute; /*fixed*/
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    
    background: #D2D2D2;
}

#container > div {
    margin: auto;
    width: 50%;
    height: 50%;
    
    background: tomato;
}

<div id="container">
    <div>my content</div>
</div>

Comments

[MADm]

Работает но я так понимаю display: flex не везде поддерживается.

[Kir ---]

MADm: начиная с IE 10 будет работать.

Answer 2

[gl_evhen]

top:0;
bottom:0;
left:0;
right:0;

Answer 3

[whats]

codepen.io/chriscoyier/pen/gsodI
Пользуйтесь на здоровье. Может работать и в 5 ие если вы добавите его лайот

Answer 4

[MADm]

еще вот так работает

#n1 {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#np1 {
position: relative;
height: 100%;
right: 50%;
float: right;
}

#np2 {
position: relative;
z-index: 1;
right: -50%;
height: 100%;
display: table;
}
#np3{
display: table-cell;
vertical-align: middle;
}

jsfiddle.net/woh3fzjk/5

ненавижу css