Question

是否可以选择查找实际屏幕位置的中心位置（顶部和左侧）？

我的主要目标是无论我在哪里滚动或点击

，都会在屏幕中央显示div

Answer 1

您可以使用window属性在纯javascript中获取中心坐标：

var x = window.innerWidth / 2;
var y = window.innerHeight / 2;

Answer 2

请添加这些代码以在网页中添加中心div

＆＃13;

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%);
}

＆＃13;

<div></div>

＆＃13;

Answer 3

使用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>

使用Pure 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>

Answer 4

请托盘此代码。

$(document).ready(function(){
  $(window).resize(function(){
	var windowWidth = window.innerWidth;
	var windowHeight = window.innerHeight;
	$('.className').css({
		position: 'absolute',
		left: windowWidth / 2,
		top: windowHeight / 2
    });	
  });
  // 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>

Answer 5

您可以这样写：

div {
   display: block;
   position: fixed;
   height: // Your div height
   width: // Your div width
   top: // your window height / 2;
   left: // your window width / 2;`
}

此问题的关键是位置，如果将其更改为固定位置，则意味着元素始终停留在当前位置（即使您滚动了）。

Answer 6

请参见resize event documentation，以在更改屏幕大小时调整其大小。

// grab el
const myEl = document.getElementById("yourId");
// initial styles
myEl.style.position = "absolute";
myEl.style.transform = "translate(-50%, -50%)"; // to counter
let x,y;
// update screen positioning
function updateCoords() {
  x = window.innerWidth / 2;
  y = window.innerHeight / 2;
}
function onResize() {
  updateCoords();
  myEl.style.top = x;
  myEl.style.left = y;
}
onResize(); // start in the middle
// when window size changes, update the element position
window.addEventListener("resize", onResize);

当前屏幕位置的中心位置

6 个答案: