通过JavaScript使div随时居中
时间: 2023-10-20 17:02:09 浏览: 41
可以通过以下的JavaScript代码来实现让一个div元素随时居中:
```javascript
// 获取要居中的div元素
var divElement = document.getElementById('your-div-id');
// 设置居中的函数
function centerDiv() {
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var divWidth = divElement.offsetWidth;
var divHeight = divElement.offsetHeight;
// 计算居中的位置
var leftPosition = (windowWidth - divWidth) / 2;
var topPosition = (windowHeight - divHeight) / 2;
// 设置div的位置
divElement.style.left = leftPosition + 'px';
divElement.style.top = topPosition + 'px';
}
// 初始化时居中并在窗口大小改变时重新居中
centerDiv();
window.addEventListener('resize', centerDiv);
```
请将上述代码中的`'your-div-id'`替换为你要居中的div元素的ID。这段代码会在初始化时将div居中,并且在窗口大小改变时重新居中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)