我通常使用 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;
}
最佳答案
试试这个:
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 的更多信息,请访问:
关于html - 垂直和水平居中图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32803967/