Как позиционировать div контейнер строго по середине экрана с помощью CSS и Javascript?

Подскажите, пожалуйста, каким образом можно позиционировать div контейнер строго по середине экрана (по высоте и ширине потипу left:50% top:50%) с помощью CSS и unobtrusive Javascript, если размеры браузерного окна/страницы заведомо не известны и независимо от прокрутки страницы (то есть если страница прокручивается div все равно в центре)?

нашел такую функцию на quirksmode.org:

/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }

function getPageSize(){
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}

// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}

arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight);
return arrayPageSize;
}
 


Но что-то все равно не выходит сделать... Как это делается правильно?


P.S. Мой доктайп на страницы на которой это нужно: xhtml11.dtd и xmlns="http://www.w3.org/1999/xhtml"

Заранее спасибо.
0
center css div document.body.clientwidth javascript

1 ответов

Не совсем уверен но так должно пройти:


#center {width:200px; height:200px; position:absolute; top:50%; left:50%; margin:-100px auto auto -100px; }
 
6

Если нужно просто центрировать контент страницы, то можно так:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
  html {
    height:100%;
  }
  body {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
  }
  #main {
    display:table;
    width:100%;
    height:100%;
    vertical-align:middle;
  }
  #cell {
    display:table-cell;
    vertical-align:middle;
  }
  #content {
    margin:0 auto;
    width:1000px;
    height:700px;
    position:relative;
    border:#999999 solid 1px;
  }
</style>
   
<!--[if IE]>

<style type="text/css">
 #cell {
   position:absolute;
   bottom:expression((this.offsetHeight>document.body.clientHeight)?'100%':'50%');
 }
 #content {
   top:expression((this.offsetHeight>document.body.clientHeight)?'100%':'50%');
 }  
</style>
 
<![endif]-->
 
</head>

<body>
  <div id="main">
      <div id="cell">
          <div id="content">
          Any text
          </div>
      </div>
    </div>
</body>
</html>
 
Если нужно центрировать что-то независимо от основного контента, то можно так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
  html {
    height:100%;
  }
  body {
    margin:0;
    padding:0;
    width:100%;
    height:1000px;
  }
  #main {
    position:fixed;
    display:table;
    width:100%;
    height:100%;
    vertical-align:middle;
  }
  #cell {
    display:table-cell;
    vertical-align:middle;
  }
  #content {
    margin:0 auto;
    width:100px;
    height:100px;
    border:#999999 solid 1px;
  }
</style>
   
<!--[if IE]>

<style type="text/css">
 #main{
     _position:absolute;
     _top:expression(eval(document.documentElement.scrollTop));
     _height:expression(document.documentElement.offsetHeight-4+'px');
 }
 #cell {
   position:absolute;
   bottom:50%;
 }
 #content {
   position:relative;
   top:50%;
 }  
</style>
 
<![endif]-->
 
</head>

<body>
  <div id="main">
      <div id="cell">
          <div id="content">
          Any text
          </div>
      </div>
    </div>
</body>
</html>
 
Надеюсь поможет)
0

Спасибо! Это почти то что мне нужно, но я имел ввиду сделать это через Dom... Конкретно мой случай это lightbox:



#Popup
{
   visibility: hidden;
   position: absolute;
   left: 50%;
   top: 48%;
   background-color: #FFF;
   padding: 10px;



   border:1px solid #000;
}

#Overlay
{
   visibility: hidden;
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
}

 



<div id="Overlay"></div>
  <div id="Popup"><div align='right'><img onclick="PopupFx.hide();" style="cursor:pointer;" src="images/cross.png" alt="закрыть" /></div>

<span style="color:#000">
<b>1:</b>Here goes step one<br/>
<b>2:</b>Here goes step two<br/>
<b>3:</b> Step three<br/>
 
<div align='right'><a href='info/howto/' style='font-weight:bold;color:#000;text-decoration:none;border-bottom:1px dashed #ff9933;'>
    read more</a></div></span></div>
 


То есть у меня Popup и Overlay отображаются поверх основного контента... Как все таки выровнять правильно с помощью DOM. Вот я вижу ваш Expression:
_top:expression(eval(document.documentElement.scrollTop));
_height:expression(document.documentElement.offsetHeight-4+'px');

будет ли он работать в js?

Заранее спасибо
0

см тут http://www.askdev.ru/question/645/CSS-position/

0

Окну делай стиль position не absolute, а fixed.
При известных размерах X и Y позиционирование делается следующим образом:

  1. Задаешь размеры width и height своего lightbox'а
  2. задаешь позицию: top: parseInt($(window).height() / 2 - y / 2) и left: parseInt($(window).width() / 2 - x / 2)

и все.

Я дам кусок кода, с подключенным jquery:

  if (x == null || y == null) {
    height = parseInt($(window).height());
    width = parseInt($(window).width());
    $('#waPopup_contentContainer').css({
    width:(width-40)+'px',
    height:(height-20)+'px'
    });
    $('#waPopup_container').css({
    top:height / 2 - (height-20) / 2,
    left:width / 2 - (width-40) / 2
    });
  } else {
    $('#waPopup_contentContainer').css({
    width:(x)+'px',
    height:(y)+'px'
    });
    $('#waPopup_container').css({
    top:parseInt($(window).height() / 2 - y / 2),
    left:parseInt($(window).width() / 2 - x / 2)
    });
  }

 
-3