垂直和水平居中图像

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?!（视频教程）

垂直和水平居中图像

center image vertically and horizontally

html

css

alignment