Поместить абсолютный div в центр экрана

Я хочу разместить div, который имеет абсолютное положение в центре экрана (прокручивается или не прокручивается).

У меня есть это, но его места div в середине документа, а не в середине текущего вида.

#main {
    width: 140px;
    height:100px;
    border: 1px solid Black;
    text-align: left;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left:-70px;
    margin-top:-50px;   
}

Ответы

Ответ 1

Измените position:absolute на position: fixed, и вам должно быть хорошо идти!

Когда вы говорите, что позиция - абсолютная, ссылка div является родительским div, который имеет позицию - относительную. Однако, если вы говорите, что позиция -fixed, ссылка является окном браузера. который вам нужен в вашем случае.

В случае IE6 я предполагаю, что вам нужно использовать выражение CSS

Ответ 2

Используйте следующий CSS:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

Ответ 3

Если вы не хотите менять положение элемента на fixed, вот решение с сохранением absolut вашего элемента.

Поскольку CSS calc() теперь поддерживается всеми браузерами, здесь решение с использованием calc().

#main {
    width: 140px;
    height:100px;
    border: 1px solid Black;
    text-align: left;
    position: absolute;
    top: calc(50vh - (/* height */100px / 2));
    left: calc(50vw - (/* width */140px / 2)); 
}

Ответ 4

Немного более сложным способом является использование нескольких внешних блоков. Этот метод хорошо работает с жестко заданной шириной/высотой среднего блока или без него (цвета фона добавлены только для того, чтобы показать, что делает каждый блок):

/* content of this box will be centered horizontally */
.boxH
{
  background-color: rgba(0, 127, 255, 0.2);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* content of this box will be centered vertically */
.boxV
{
  background-color: rgba(255, 0, 0, 0.2);
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* content of this box will be centered horizontally and vertically */
 .boxM
{
  background-color: lightblue;
  padding: 3em;
}
<div>
  some text in the background
</div>
<div class="boxH">
  <div class="boxV">
    <div class="boxM">
      this div is in the middle
    </div>
  </div>
</div>

Ответ 5

Как насчет этого трюка:

position: absolute;
height:200px;
top: 0;
left: 1%;
right: 1%;

Ответ 6

Мне удалось разместить абсолютно позиционированный текст в центре со следующим:

position: absolute;
text-align: center;
left: 1%;
right: 1%;

Это вариант ответа от Кеннета Брегата. Он поддерживает absolute позиционирование, а не fixed, плюс решает проблемы переноса текста, упомянутые в некоторых ответах. Не забывайте, что родителю нужно relative расположение.