2

Como centralizar a div #windows que é criada de forma dinâmica com width/height que variam, sobre da div #main-content sendo que preciso que fique da forma que está, não criando ela dentro da 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

16
  • 1
    E porque a div #windows esta for da div #main-content?
    – user3603
    Commented 3/08/2015 às 12:19
  • ela é criada de forma dinâmica
    – Jesus
    Commented 3/08/2015 às 12:20
  • 2
    E qual o problema? Ela pode ser criada dinamicamente dentro de #main-content, ou você precisa que ela fique fora?
    – user3603
    Commented 3/08/2015 às 12:21
  • 1
    apesar de ser possível fazer isto calculando o top e o left da div #window utilizando como parametro o offset da #page-wrap e da #main-content, não vejo razão para não colocar a #window dentro da #main-content e usar um position:absolute com margin auto. Commented 3/08/2015 às 12:28
  • 1
    Ok @Gerep, vejamos se alguém do javascript se comove e me ajuda =/
    – Jesus
    Commented 3/08/2015 às 12:44

2 Respostas 2

2

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>

1
  • Muito obrigado @KaduAmaral
    – Jesus
    Commented 3/08/2015 às 13:01
0

Enquanto eu fazia a seguinte solução, o Kadu postou a dele. como a mesma usa apenas JavaScript puro, resolvi postar assim mesmo.

E outro cuidado deve ser tomado, como a posição do #window é calculada em relação ao #main-content, então ela deve ser recalculada sempre que a window for redimensionada, por isto tive que fazer a manipulação também no 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>

1
  • Muito agradecido @TobyMosque ;)
    – Jesus
    Commented 3/08/2015 às 13:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .