Привіт, я використовую щось подібне до наступного, щоб отримати div посередині екрану:
<style type="text/css">
#mydiv {
position:absolute;
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
border: 1px solid #ccc;
background-color: #f3f3f3;
}
</style>
<div id="mydiv">Test Div</div>
Однак проблема з цим полягає в тому, що він позиціонує елемент посередині сторінки, а не екрану. Отже, якщо сторінка заввишки кілька екранів, а я перебуваю у верхній частині сторінки (верхня частина частини відображається на екрані), коли я створюю div, він навіть не з'являється на екрані. Ви повинні прокрутити вниз, щоб переглянути його.
Чи може хтось, будь ласка, сказати мені, як зробити так, щоб він відображався посередині екрану?
Просто додайте position:fixed
і він буде залишатися в полі зору навіть при прокручуванні вниз. див. на [
#mydiv {
position:fixed;
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
border: 1px solid #ccc;
background-color: #f3f3f3;
}
Я щойно протестував саме цей код на тестовій сторінці, і він ідеально відцентрував div на сторінці, навіть коли перед ним було близько 100 <br />
, які намагалися відсунути його вниз.
Можливо, спробуйте перевірити решту вашого коду, щоб побачити, чи є у вас щось, що або перезаписує значення DIV, або що впливає на ваш DIV, щоб викликати ці проблеми.
Для цього потрібно визначити розмір екрану. Це неможливо за допомогою CSS або HTML; вам потрібен JavaScript. Ось запис Центру розробників Mozilla про властивості вікна https://developer.mozilla.org/en/DOM/window#Properties
Визначте доступну висоту та положення відповідно.