DIV-Elemt абсолютное (!) Позиционирование

Question

Прежде всего: нет, я не ищу позицию недвижимости: абсолютный;

Что я хочу, чтобы создать поле, которое отображает текст. Я хочу отобразить это поле точно в середине страницы, а затем исчезнуть из фона, не имеет значения, где div помещается в код.

На данный момент это выглядит следующим образом: https://www.dropbox.com/s/wiljdh1xjj3we1c/Capture1.PNG https://www.dropbox.com/s/chw7pdes5fdcj3u/Capture2.PNG

Как я могу поместить Elemtn ABSOLUTE в середине страницы, не имеет значения, где написано в коде?

Теперь я мог бы сказать хорошо, я поместил его поверх содержимого. Но проблема в том, что в этом поле отображается некоторая информация, которая генерируется в контенте, поэтому я должен поместить его в код после содержимого.

Я надеюсь, что кто-то может помочь мне :)

PS: Если у вас есть другое решение, чтобы решить что-то вроде этого ... чувствовать себя желанными, чтобы сказать мне! Я просто хочу что-то вроде alert(); - Box с моим собственным стилем.

EDIT: Некоторые усилия (в основном уже показано на скриншотах, но тут какой-то код, как раз не хотят, чтобы сделать его в заблуждение)

Я сохранить текст следующим образом:

// Save Help-Text 
ob_start(); 
?> 
This is the main page. There is no help available! 
<?php 
$help = ob_get_clean(); 

отобразить текст следующим образом: (эхо create_help ($ помощь), создает справочную метку и выводит его)

function create_help($content){ 
$help = " 
<div id=\"help-bg\" class=\"closehelp\" ></div> 
<div id=\"help\" > 
    <img src=\"../images/close.png\" class=\"closehelp\" /> 
    $content 
</div> 
"; 
return $help; 
} 

Это CSS для окна:

/* Help-box style */ 
#help 
display: none; 
position: absolute; 
margin-left: auto; 
margin-right: auto; 
background-color: #B8DBFF; 
border: 5px solid rgb(58, 100, 250); 
border-top: 30px solid rgb(58, 100, 250); 
border-radius: 5px; 
padding: 20px; 
width: 600px; 
z-index: 1001; 
#help img 
position: absolute; 
margin-left: 595px; 
margin-top: -47px; 
height: 25px; 
width: 25px; 
/* Makes background of Help-box transparent black */ 

#help-bg 
background-color: black; 
z-index: 1000; 
width: 100%; 
height: 100%; 
position: fixed; 
left: 0px; 
top: 0px; 
opacity:0.6; 
display: none; 

Answer 1

Прежде всего, я бы рекомендовал использовать position:fixed; вместо position:absolute;, потому что тревога будет прокручивать страницы. Если у вас фиксированная высота и ширина, попробуйте что-то вроде margin: -150px 0 0 -150px; left: 50%; top: 50%;. Этот CSS-код будет центрировать ваш div горизонтально и вертикально (Демо ->http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html). Но если вы используете динамическую высоту, возможно, вам стоит рассмотреть возможность использования jQuery или присвоить ему фиксированную верхнюю позицию.

Answer 2

попробовать это:

html, body{ 
    position: relative; 
} 
.yourAbsoluteClass{ 
    position: absolute; 
    width: 50%; 
    top: 25%; 
    left: 50%; 
}