确定div中处在屏幕中心的点
时间: 2024-02-13 13:59:57 浏览: 34
要确定一个div中处在屏幕中心的点,可以使用JavaScript和CSS来实现。首先,你可以使用JavaScript获取屏幕的宽度和高度。然后,你可以使用CSS的transform属性将div居中。最后,你可以使用JavaScript计算出div中心点的坐标。
下面是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>居中div中心点</title>
<style>
#center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ccc;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="center"></div>
<script>
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
var centerDiv = document.getElementById("center");
var divWidth = centerDiv.offsetWidth;
var divHeight = centerDiv.offsetHeight;
var centerX = screenWidth / 2 - divWidth / 2;
var centerY = screenHeight / 2 - divHeight / 2;
console.log("centerX: " + centerX + ", centerY: " + centerY);
</script>
</body>
</html>
```
在上面的代码中,我们定义了一个id为“center”的div,并将其居中显示。然后,我们使用JavaScript获取屏幕的宽度和高度,以及div的宽度和高度。最后,我们计算出div中心点的坐标,并在控制台中输出。