Javascript-форум - Как выровнять div по вертикали&горизонтали по центру страницы?

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

- jQuery (https://javascript.ru/forum/jquery/)

- - Как выровнять div по вертикали&горизонтали по центру страницы? (https://javascript.ru/forum/jquery/51452-kak-vyrovnyat-div-po-vertikali-gorizontali-po-centru-stranicy.html)

Как выровнять div по вертикали&горизонтали по центру страницы?

Чтоб он был absolute и чтоб всегда был по центру экрана(как по вертикали так и по горизонтали), только не страницы, а именно экрана, то что видит пользователь на экране вот по центру этого, а не по центру всей страницы(она то может прокручиваться), ну и при прокрутки чтоб данные центрирования пересчитывались - так как они поменялись. Спасибо.

CSS кода не нужна реализация, именно Jquery(javascript)

Цитата:

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

CSS кода не нужна реализация

А почему?

<style>
div{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 200px;
    height: 50px;
    background: red;
}
</style>

<p style="height: 2000px"></p>
<div></div>

рони, твой код делает по центру вертикали всей страницы, например высота страницы height=10000px он выставит на height=5000px, мне это не надо, мне надо по центру вертикали окна того что видит пользователь,например я могу находится в самом низу страницы этой на 10000px и она у меня будет по центру вертикали, а не на середине странице где-то останется... на 5000px, одним словом по центру того где ползунок находится так правильнее сказать, то есть если я прокручиваю страницу вниз то этот div Всегда будет по центру вертикали страницы.

danik.js, мне надо jquery, и что это за height: 2000px, у меня резиновая высота которая может меняться, мне не годиться статическая высота.

ну если без css и absolute
top блока =прокрутка + (высота окна - высота блока) / 2
left блока =прокрутка + (ширина окна - ширина блока) / 2

учесть, что значения будут меняться при загрузке, ресайзе и прокрутке

cha0s,
Код который написал danik.js сработает так как вы описываете с любой высотой любого контента. Обоснуйте зачем размещать блок именно js кодом? Что в этой задаче невыполнимо на css?

На мой взгляд вы просто плохо знакомы с css.

Цитата:

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

а разве не так ? нажми на одну из картинок она всегда будет в центре видимой части -- независимо от прокрутки
добавлено только реагирование на скрол и размеры окна

но лучше присваивать класс элементу который содержит параметры что указал danik.js,

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8" />
  <style type="text/css">
  <!--
  body{
    height: 10000px;
    width: 1000px;
  }

 </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
jQuery.fn.center = function()
	{
	var w = $(window);
   	this.css("position","absolute");
	this.css("top",(w.height()-this.height())/2+w.scrollTop() + "px");
	this.css("left",(w.width()-this.width())/2+w.scrollLeft() + "px");
    return this;
	}
function creatOverlay(){
  var docHeight = $(document).height();
  $("<div id='overlay'></div>")
  .appendTo("body")
  .height(docHeight)
  .css({
    'opacity': 0.4,
    'position': 'fixed',
    'top': 0,
    'left': 0,
    'background-color': 'black',
    'width': '100%',
    'z-index': 5000
  });
$(this).clone().appendTo("body").center().css({'z-index': 5001}).attr({'id' : 'cln'})
}
function remov()
{
    $("#overlay, #cln").remove();

}
function fix()
{
    $('#cln').center()
}
$(window).on({"scroll" : fix, "resize" : fix});
$(document).on({"click": creatOverlay, }, "img");
$(document).on({"click": remov}, "#overlay, #cln");
</script>
</head>
<body>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt=""  style="position: fixed">
<img src="http://javascript.ru/forum/images/smilies/write.gif" alt=""  style="position: relative; left: 100px; top: 200px">
</body>
</html>