Привет, я использую что-то похожее на следующее, чтобы получить 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, и он будет держать его в поле зрения, даже если вы прокрутите вниз. см. http://jsfiddle.net/XEUbc/1/
#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 style="
display: inline-block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 200px;
height: 100px;
margin: auto;
background-color: #f3f3f3;">Full Center ON Page
</div>Если вы знаете размер элемента, вы можете просто использовать свойство margin:
#mydiv {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
Примечание, что вы должны использовать половину ширины и высоты элемента
Но если вы не уверены в размере, это будет делать трюк:
#mydiv {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Использовать преобразование;
<style type="text/css">
#mydiv {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
Javascript Solution:
var left = (screen.width / 2) - (530 / 2);
var top = (screen.height / 2) - (500 / 2);
var _url = 'PopupListRepair.aspx';
window.open(_url, self, "width=530px,height=500px,status=yes,resizable=no,toolbar=no,menubar=no,left=" + left + ",top=" + top + ",scrollbars=no");
Просто поместите margin:auto;
#mydiv {
margin:auto;
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;
}
<div id="mydiv">Test Div</div>
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
Это сработало для меня
Короткий ответ. Просто добавьте position:fixed, и это решит вашу проблему.
<html>
<head>
<style type="text/css">
#mydiv {
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width:100px;
height:200px;
margin:auto;
border: 1px solid #ccc;
background-color: #f3f3f3;
}
</style>
</head>
<body>
<div id="mydiv">Maitrey</div>
</body>
</html>
Хорошо, ниже приведен рабочий пример для этого.
Это будет обрабатывать центральное положение, если вы измените размер веб-страницы или загрузите ее в любом формате.
<!DOCTYPE html>
<html>
<head>
<style>
.loader {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
border: 10px solid #dcdcdc;
border-radius: 50%;
border-top: 10px solid #3498db;
width: 30px;
height: 30px;
-webkit-animation: spin 2s linear infinite;
animation: spin 1s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="loader" style="display:block"></div>
</body>
</html>В ur script странице...
$('.a-middle').css('margin-top', function () {
return ($(window).height() - $(this).height()) / 2
});
Используйте a-средний класс в Div...
<div class="a-middle">
Два способа расположить тег в середине экрана или его родительский тег:
Установите для родительского тега position значение relative (если целевой тег имеет родительский тег), а затем установите стиль целевого тега следующим образом:
#center {
...
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Стиль родительского тега должен выглядеть следующим образом:
#parent-tag {
display: flex;
align-items: center;
justify-content: center;
}
Попробуйте это.
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Я только что проверил этот точный код на тестовой странице, и он идеально сосредоточил div на странице, даже с примерно 100 <br />, прежде чем пытаться его нажимать.
Возможно, попробуйте проверить остальную часть кода, чтобы узнать, есть ли у вас что-то, что либо переписывает значения DIV, либо выполняет DIV, чтобы вызвать эти проблемы.
<!DOCTYPE html>
<html>
<head>
<style>
.loader {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
border: 10px solid #dcdcdc;
border-radius: 50%;
border-top: 10px solid #3498db;
width: 30px;
height: 30px;
-webkit-animation: spin 2s linear infinite;
animation: spin 1s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="loader" style="display:block"></div>
</body>
</html>width:30em;
position: static;
margin: 0px auto 0px auto;
padding: 0px;
Для этого вам нужно будет определить размер экрана. Это невозможно с помощью CSS или HTML; вам нужен JavaScript. Вот вкладка Mozilla Developer Center в свойствах окна https://developer.mozilla.org/en/DOM/window#Properties
Определите необходимую высоту и положение.