Javascript-форум - Открытие iframe по центру окна

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Открытие iframe по центру окна (https://javascript.ru/forum/misc/57255-otkrytie-iframe-po-centru-okna.html)

Открытие iframe по центру окна

Добрый день!
Попытаюсь объяснить, что хочу...
Есть на странице кнопка, которая открывает iframe, при скроле она ходит вверх и вниз, логично же)
Хочу сделать так, что бы когда нажимаешь на кнопку, будь она где угодно (внизу, вверху) при открытии ifram'a кнопка центрировалась. А то нажал на кнопку, а выскочило окно или нет, кто его знает, а так сразу отцентрировало
Думаю мысль понятна. Заранее спасибо!

var elem = document.getElemenById('butt')

<input id="butt" type="button" onclick="elem.style.position='absolute';elem.style.top='50%';elem.style.left='50%'">

подскажите пожалуйста куда его вставлять?
у меня такого вида код

<div id="ch1">
  <div id="closeButton" onclick="document.getElementById('ch1').style.display='none'">Х</div>
  <iframe src="/Summer2015_02/" width="1070" height="508">Ваш браузер не поддерживает плавающие фреймы!</iframe>
</div>
        	
 <div class="showcase">Подробнее<input type="button" value="" onclick="document.getElementById('ch1').style.display='block'">
</div>

<style>
#ch1 {
  position:fixed;
  left:0;right:0;
  top:0;bottom:0;
  margin:auto;
}
</style>
<div id="ch1">
  <div id="closeButton" onclick="document.getElementById('ch1').style.display='none'">Х</div>
  <iframe src="/Summer2015_02/" width="1070" height="508">Ваш браузер не поддерживает плавающие фреймы!</iframe>
</div>
        	
 <div class="showcase">Подробнее<input type="button" value="" onclick="document.getElementById('ch1').style.display='block'">
</div>

что бы было понятней, вот пример сайта http://goldfig.ru/

там есть блоки, первые открываются на onlick, вторые на iframe
и когда открываешь блок, не центрирует главную страницу, на которой идет открытие блока, что не совсем удобно

Цитата:

Сообщение от maximamus

не вышло(

<!DOCTYPE html>
<html>
<head>
<style>
  /*Для теста центрирования*/
body {
  width:100%;
}
body *{
  margin:0;
  padding:0;
}
#pun {
  height:760px;
}
/* End//Для теста */

/* Cтиль элементов */
#ch1 {
  display:none;
  position:fixed;
  left:0;right:0;
  top:0;bottom:0;
  width:500px; /*Тут ставим Вашу ширину под фрейм*/
  height:508px;
  margin:auto!important;
}
#closeButton {
  position:absolute;
  font: normal normal 400 16px/normal "Times New Roman";
  background:#fff;
  box-shadow: 0 0 12px rgba(0,0,0,.4);
  cursor:pointer;
  border-radius:20px;
  padding:3px 7px;
  border:solid 3px rgba(0,0,0,.5);
  top:-20px;
  right:-20px;
}
</style>
</head>
<body>
<div id="pun">
 
  <div class="showcase"><input type="button" value=" Подробнее " onclick="document.getElementById('ch1').style.display='block'"></div>
  <div id="ch1">
           <span id="closeButton" onclick="document.getElementById('ch1').style.display='none'" title=" Закрыть ">Х</span>
           <iframe src="http://javascript.ru/forum/" width="100%" height="508">Ваш браузер не поддерживает плавающие фреймы!</iframe>
  </div>
        	


</div>
</body>
</html>

Ссылку во фрейме заменил для теста

тут получается в body один блок и один подраздел, там же получается куча этих блоков и поэтому никак не выравнивает(

я думал как то можно скриптом это решить, но этой области, ваще дремучий лес(

maximamus,
Тогда нун классом, а не id все блоки ставить, юзайте document.querySelectorAll

если бы я в этом js что то понимал, для меня это ваще черная магия( помогите пожалуйста разобраться(