垂直和水平方向的中心圖像

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?!（視頻教程）