html - 垂直和水平居中图像

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?! (视频教程)