центральное изображение по вертикали и по горизонтали

Question

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

Мои поиски показали много результатов, но я смешал и подошел безрезультатно. Позаботьтесь о помощи?

Вот простой HTML

<div id="entpa"> 
    <section id="mainContAPos"> 
    </section> 
</div> 

Вот мой CSS

body{ 
    background-color: #0D0D0D; 
} 

#entpa{ 
    position: absolute; 
} 

#mainContAPos{ 
    position: fixed; 
    vertical-align: middle; 
    background-image: url('frontpage1366.png'); 
    width: 1366px; 
    height: 768px; 
    border: 8px solid #FFF4CF; 
    border-radius: 16px; 
} 

Answer 1

Попробуйте это:

HTML (без изменений)

<div id="entpa"> 
    <section id="mainContAPos"></section> 
</div> 

CSS

html, body { height: 100%; } 

#entpa { 
    display: flex; 
    justify-content: center; /* center child div horizontally (in this case) */ 
    align-items: center; /* center child div vertically (in this case) */ 
    height: 100%; 
    /* position: absolute; REMOVE; no need for this */ 
} 

#mainContAPos{ 
    /* vertical-align: middle; REMOVE; no need for this */ 
    background-image: url('frontpage1366.png'); 
    width: 1366px; 
    height: 768px; 
    border: 8px solid #FFF4CF; 
    border-radius: 16px; 
    } 

Демо: http://jsfiddle.net/qxmLk1j6/

Обратите внимание, что Flexbox поддерживается всеми основными браузерами, except IE 8 & 9.

Для получения дополнительной информации о CSS Flexbox визит:

• A Complete Guide to Flexbox
• What the Flexbox?! (видеоурок)