Jquery 菜单'；s响应站点的位置

我必须做一个中心DIV（这是一个菜单）和一个十字架作为背景的网站。当用户来到网站时，十字像要居中，所以我用了

"background-position:50% 50%;"

这很有效。 问题是，当我点击各种菜单时，十字中心必须在边框上。当用户单击右侧图像时，十字中心必须位于屏幕的右边框上，顶部、底部和左侧图像也是如此

我希望避免固定MAIN的大小，而是使用%来代替，但是当我这样做时，就不可能正确地将交叉点的中间居中放置在边框上（它会移动，因此定位会出错）

以下是查看图像以更好地显示图像的链接：

请注意，十字图像的大小为3000x3000px。 有没有人有办法实现这一点

这是我的HTML：

<div id="main">
   <div class="menuLosange">
    <div class="losange" id="menuHaut"></div>
    <div class="losange" id="menuBas"></div>
    <div class="losange" id="menuDroite"></div>
    <div class="losange" id="menuGauche"></div>
   </div>
</div>

---

谢谢你的回答。

如果只有我不清楚这个问题？吃蓝色药丸吧，我的朋友：）@Emin你也吃了吗？@C-link那不是给你的！OA无法表达他的实际问题，因为他的英语很差，有时我在提问时也有困难。当出现这种情况时，我总是花一些时间准备一个小提琴链接（服用红色药丸），因为我不希望观众也花时间修改我的语法和“猜测”我的问题的真正含义。

body {  
    width:100%;  
    margin:auto;  
    padding:10px;  
}


#mainLeft {  
    display: inline-block;  
    width: 20%;  
    vertical-align: top;  
    padding-top:20px;  
    font-family: verdana;     
}

#main {  
    display: inline-block;  
    width:79%;      
    background-color:#E6E6E6;  
    height:900px;  
    background-image: url('images/background2.png');  
    background-position:50% 50%;  
    overflow:hidden;  
}