Создаем окна по центру экрана JQuery + css: position absolute

Для того, чтобы блок был всегда по центру экрана, надо задать ему css стиль со следующими параметрами:

.blockcentr {
background: #ccc;
width: 320px;
position: absolute;
left: 50%;
margin-left: -160px; /* отрицательный отступ равный 1/2 ширины (width) позиционируемого блока */
}

Данное правило работает только в том случае, если ширина блока задана статично, т.е., как в данном случае - 320 px.

Пример: нажмите на ссылку, чтобы открыть окно.

Открыть окно

А теперь бонус! =)

Вы можете скачать код рабочего примера данного окна

Также можете сразу просмотреть код в живую ниже:

<a href='#' class="openokno">Открыть окно</a>
<div class="blockcentr" style="display: none">
<b>Чтобы окно было по центру:</b><br /> width: 320px, а margin-left: отрицательный, равный половине ширины.
Нажмите на закрыть, чтобы скрыть окно.
<a href='#' class="openokno">Закрыть</a></div>

<style>
.blockcentr {
width: 320px;
position: absolute;
left: 50%;
margin-left: -160px;
background: #FFE7E7; padding: 15px; line-height: 25px; border-radius: 15px; border: 1px solid #A5A5A5; z-index: 999}
</style>

<script type="text/javascript">
$(document).ready(function(){
$(".openokno").click(function(){
$(".blockcentr").slideToggle("2000");
}); });
</script>