Como já citado nos comentários, basta calcular o offset
:
var $mc = $('#main-content'); // Seleciona o elemento div#main-content
var $wd = $('#windows'); // Seleciona o elemento div#windows
// Calcula o offset da esquerda
// posição esquerda + metade da largura do content - metade da largura do windows
var left = $mc.offset().left + ($mc.width() / 2) - ($wd.width() / 2);
// Calcula o offset do topo
// posição topo + metade da altura do content - metade da altura do windows
var top = $mc.offset().top + ($mc.height() / 2) - ($wd.height() / 2);
// Atribui posições
$('#windows').css({'left': left, 'top': top});
Para que o elemento seja posicionado corretamente, ele deve estar na "raiz" do documento, ou seja filho do body
e sua position
deve ser absolute
, semelhante a isto:
#windows { /* windows deve ser filho do body */
position: absolute; /* <-- Importante */
background: red;
width: 708px;
height: 538px;
}
Demo:
//<div id="windows"></div>
jQuery(document).ready(function($){
$(document.body).append( $('<div />').attr('id', 'windows') );
var $mc = $('#main-content');
var $wd = $('#windows');
var left = $mc.offset().left + ($mc.width() / 2) - ($wd.width() / 2);
var top = $mc.offset().top + ($mc.height() / 2) - ($wd.height() / 2);
$('#windows').css({'left': left, 'top': top});
});
#page-wrap {
position: relative !important;
margin-top: 0px;
margin-left: 170px;
width: 768px;
height: 593px;
border-radius: 3px;
border: 1px solid #8e8e97;
background-color: rgb(247, 247, 247);
}
#main-content {
position: absolute;
width: 100%;
height: 100%;
background: yellow;
}
#windows {
position: absolute;
background: red;
width: 708px;
height: 538px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="page-wrap">
<div id="main-content">
<!--
Alinhar aqui no centro a div#windows
-->
</div>
</div>
#windows
esta for da div#main-content
?#main-content
, ou você precisa que ela fique fora?