對齊/包裝div的圖像

Question

我想要實現的是一個以屏幕中心居中的div（720x360）的頁面。這是使用jQuery使用

$(window).height()和$(window).width()並且完美地工作。

下一部分是獲取180x180圖像以適應該中間div。這些將填滿屏幕+超出。

我被困在如何讓這些對齊方式，我找不到任何人做同樣的事情的生動的例子。

那麼，這甚至有可能嗎？

謝謝，任何幫助表示讚賞！

Answer 1

<style type="text/css"> 

#main { 
    display: block; 
    margin:0 auto; /* This is make div into center of screen*/ 
    width: 720px; 
    height: 360px; 
    background: #ccc; /* Just for visibility */ 
    position: relative; /* As we want to make other div into center of this */ 
} 

#content { 
    display: block; 
    width: 180px; 
    height: 180px; 
    position: absolute; 
    left: 36.36%; /* You can calculate using math */ 
    /* 
     Total Width - Width 
     So you will get end point now minus half 
     Width/2 = 90 
     Then 720 - 180 = 540 
     And now your box will point to end but you need to divide 
     half of width again 90/2 = 45 
     Result is : 
     180/2/2 = 45 
     720-180-45 = 495 
     180/495*100 = 36.36 
     So this is your width position. 
    * */ 
    top: 25%; 
    /* 
    Same for height but as you can see it's 25% of your value and very easy 
    * */ 
    background: red; 
} 


    </style> 
    <div id="main"> 
    <div id="content"></div> 
    </div>