center image vertically and horizontally

Question

I typically use content above a div to push everything down. This project needs one single image centered horizontally and vertically with nothing else.

My searches turned up lots of results, but I've mixed and matched to no avail. Care to help?

Here's the simple HTML

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

Here's my 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

Try this:

HTML (no changes)

 <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;
  }

Demo: http://jsfiddle.net/qxmLk1j6/

Note that flexbox is supported by all major browsers, except IE 8 & 9 .

For more information about CSS Flexbox visit:

• A Complete Guide to Flexbox
• What the Flexbox?! (video tutorial)