让div在页面中间显示

2021年9月4日 2点热度 0条评论 来源: Tertiary_grass

本文是用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>

使用CSS代码实现的缺点是,我们改变div的宽度和高度时,还要修改margin-top和margin-left两个属性值。

    原文作者:Tertiary_grass
    原文地址: https://blog.csdn.net/a1217158716/article/details/71159663
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。