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/

请注意，所有主流浏览器except IE 8 & 9都支持flexbox。

有关 CSS Flexbox 的详细信息，请访问：

A Complete Guide to Flexbox
What the Flexbox?!（视频教程）

中心图像垂直和水平

1 个答案: