Есть ли возможность найти центральное положение (сверху и слева) фактического положения экрана?Центральное положение текущего положения экрана
Моя главная цель состоит в том, чтобы показать DIV в центре экрана, независимо от того, где я прокрутки или нажмите
Вы можете использовать window атрибуты, чтобы получить координаты центра в чистом JavaScript:
var x = window.innerWidth/2;
var y = window.innerHeight/2;
nope. Он дает только размер моего экрана, а не фактическое положение в документе – user6769617
не размером, а половиной (таким образом, центром). Используйте это, чтобы позиционировать элемент, который вы хотите ... – joc
пожалуйста добавить это код для добавления центр DIV в веб-странице
div {
background:red;
position:absolute;
color:#fff;
top:50%;
left:50%;
padding:50px;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}<div></div>, пожалуйста, только javascript – user6769617
С Jquery
jQuery.fn.center = function(parent) {
if (parent) {
parent = this.parent();
} else {
parent = window;
}
this.css({
"position": "absolute",
"top": ((($(parent).height() - this.outerHeight())/2) + $(parent).scrollTop() + "px"),
"left": ((($(parent).width() - this.outerWidth())/2) + $(parent).scrollLeft() + "px")
});
return this;
}
$("div.target:nth-child(1)").center(true);
$("div.target:nth-child(2)").center(false);div.container{
width:300px;
height:300px;
border:1px solid #555;
position:relative;
top:10px;
left:10px;
}
div.target{
width:50px;
height:50px;
color:white;
background:rgba(30,30,30,.7);
border-radius: 10px;
text-align:center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="target">1<br>parent</div>
<div class="target">2<br>window</div>
</div>С чистого CSS
div {
background:green;
position:fixed;
color:#fff;
width:50px;
height:50px;
top:50%;
left:50%;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}<div></div>, пожалуйста, только javascript – user6769617
Возможный дубликат http://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on- экран –
см. эту скрипку http://jsfiddle.net/DerekL/GbDw9/ –
Поднимите этот код.
$(document).ready(function(){
$(window).resize(function(){
\t var windowWidth = window.innerWidth;
\t var windowHeight = window.innerHeight;
\t $('.className').css({
\t \t position: 'absolute',
\t \t left: windowWidth/2,
\t \t top: windowHeight/2
}); \t
});
// call `resize` to center elements
$(window).resize();
});div {
background:red;
color:#fff;
padding:50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="className"></div>
И вы намерены с помощью JavaScript/JQuery для этого? Или это решение только для CSS? – Roberrrt
Я отвечу вопросом: что вы пробовали? Если вы Google немного, вы найдете множество примеров для начала. Затем вы можете обратиться за помощью к своему конкретному коду –
Да, есть возможность: вычислить центр, используя window.screen - https://developer.mozilla.org/en-US/docs/Web/API/Window/screen –