Я хочу разместить 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;
}
Измените position:absolute на position: fixed, и вам должно быть хорошо идти!
Когда вы говорите, что позиция - абсолютная, ссылка div является родительским div, который имеет позицию - относительную. Однако, если вы говорите, что позиция -fixed, ссылка является окном браузера. который вам нужен в вашем случае.
В случае IE6 я предполагаю, что вам нужно использовать выражение CSS
Используйте следующий CSS:
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
Если вы не хотите менять положение элемента на 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));
}
Немного более сложным способом является использование нескольких внешних блоков. Этот метод хорошо работает с жестко заданной шириной/высотой среднего блока или без него (цвета фона добавлены только для того, чтобы показать, что делает каждый блок):
/* 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>Как насчет этого трюка:
position: absolute;
height:200px;
top: 0;
left: 1%;
right: 1%;
Мне удалось разместить абсолютно позиционированный текст в центре со следующим:
position: absolute;
text-align: center;
left: 1%;
right: 1%;
Это вариант ответа от Кеннета Брегата. Он поддерживает absolute позиционирование, а не fixed, плюс решает проблемы переноса текста, упомянутые в некоторых ответах. Не забывайте, что родителю нужно relative расположение.
margin-left: -half_of_the_div;
left: 50%;
position: fixed;