让div在页面中间显示

最新推荐文章于 2022-08-12 15:33:47 发布

Tertiary_grass

最新推荐文章于 2022-08-12 15:33:47 发布

阅读量8k

点赞数 1

分类专栏： HTML & CSS JavaScript 文章标签： CSS JavaScript div在页面中间元素居中

本文链接：https://blog.csdn.net/a1217158716/article/details/71159663

版权

HTML & CSS 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

JavaScript

6 篇文章 0 订阅

订阅专栏

本文是用js代码和CSS代码两种方法实现div在页面中间的显示。

方法一：使用JavaScript方法实现：

<html>
<head>
<title>响应式网页设计</title>
<script>
function sc1() {
document.getElementById("tt").style.top = (document.documentElement.scrollTop + (document.documentElement.clientHeight - document.getElementById("tt").offsetHeight) / 2) + "px";
document.getElementById("tt").style.left = (document.documentElement.scrollLeft + (document.documentElement.clientWidth - document.getElementById("tt").offsetWidth) / 2) + "px";
}
</script>

<head>
<body οnlοad="sc1()">
<div id="tt" style="width:200px;height:200px;background:red;position:absolute; ">响应式网页设计</div>
</body>
</html>

使用JavaScript实现的优点是，我们可以随意改变div的大小。

方法二：使用CSS方法实现：

<html>
<head>
<title>响应式网页设计</title>
<style type="text/css">
#tt{
height:200px;
width:200px;
background:red;
top:50%;
left:50%;
position:absolute;
margin-top:-100px;
margin-left:-100px;
}
</style>
<head>
<body οnlοad="sc1()">
<div id="tt">响应式网页设计</div>
</body>
</html>