Centralize dynamically created div on top of another div

Question

How to center the div #windows that is created dynamically with width/height that vary, over the div #main-content and I need it to stay the way it is, not creating it inside the div #main-content

<div id="page-wrap">
<div id="main-content">
    <!-- centralizar a div#windows aqui dentro -->
</div>
</div>

<div id="windows"></div>

<style>
#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 {
    background: red;
    width: 708;
    height: 538;
}
</style>

Demo - Jsfiddle

Answer 1

As already mentioned in the comments, just calculate the 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});

In order for the element to be positioned correctly, it must be in the "root" of the document, or child of the body and its position must be absolute, similar to this:

#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>

Answer 2

While I was doing the following, Kadu posted his. as it uses only pure Javascript, I decided to post anyway.

And another caution should be taken, as the #window position is calculated relative to #main-content, so it should be recalculated whenever the window is resized, so I had to do the manipulation also in window.onresize.

var pageWrap = document.getElementById("page-wrap");
var mainContent = document.getElementById("main-content");

var txtWidth = document.getElementById("txtWidth");
var txtHeight = document.getElementById("txtHeight");
var txtColor = document.getElementById("txtColor");

var btAdd = document.getElementById("btAdd");
var criarWindow = function () {
    var myWindow = document.getElementById("window");    
    if (!myWindow) {        
        myWindow = document.createElement("div");
        myWindow.id = "window";
        document.body.appendChild(myWindow);
    }
    
    myWindow.style.width = txtWidth.value + "px";
    myWindow.style.height = txtHeight.value + "px";
    myWindow.style.position = "absolute";
    
    var left = pageWrap.offsetLeft + mainContent.offsetLeft + ((mainContent.offsetWidth - myWindow.offsetWidth) / 2);
    var top = pageWrap.offsetTop + mainContent.offsetTop + ((mainContent.offsetHeight - myWindow.offsetHeight) / 2);
    
    myWindow.style.backgroundColor = txtColor.value;
    myWindow.style.absolure = txtColor.value;    
    myWindow.style.top = top + "px";
    myWindow.style.left = left + "px";
    
    console.log(myWindow, top, left);
};
btAdd.onclick = criarWindow;
window.onresize = criarWindow;

#page-wrap {
    position: fixed;
    top: 0px;    
    right: 0px;    
    bottom: 0px;
    left: 0px;
    padding: 0px;
    margin: 0px;
    background-color: whitesmoke;
}

#param-window {
    width: 480px;
    left: 0px;
    right: 0px;
    margin: 0px auto;    
}

#main-content {
    background-color: white;
    position: absolute;
    margin: 0px auto;
    left: 0px;
    right: 0px;
    width: 480px;
    height: 360px;
    box-shadow: 0px 0px 10px black;
}

.row {
    box-sizing: border-box;
    clear: both;
    width: 100%;   
    height: 30px;
}

.columns {
    float: left;
    height: 30px;
}

.columns label {
    float: right;
}

.columns label:after {
    content: ':';
    margin-right: 5px;
}

.columns input {
    width: 85%;
}

.column-3 {
    width: 25%;
}

.column-9 {
    width: 75%;
}

<div id="page-wrap">
    <div id="param-window">
        <div class="row">
            <div class="columns column-3">
                <label for="txtWidth" >Width</label>
            </div>
            <div class="columns column-9">
                <input id="txtWidth" type="number" value="360" />
            </div>
        </div>
        <div class="row">
            <div class="columns column-3">
                <label for="txtHeight" >Height</label>
            </div>
            <div class="columns column-9">
                <input id="txtHeight" type="number" value="240" />
            </div>
        </div>
        <div class="row">
            <div class="columns column-3">
                <label for="txtColor" >Color</label>
            </div>
            <div class="columns column-9">
                <input id="txtColor" type="color" value="#FF0000" />
            </div>
        </div>
        <div class="row">
            <div class="columns column-3">
                
            </div>
            <div class="columns column-9">
                <button id="btAdd">Criar</button>
            </div>
        </div>
    </div>
	<div id="main-content">
	    <!--
            Alinhar aqui no centro a div#windows
        -->
	</div>
</div>