设置一个DIV块固定在屏幕中央(两种方法)
设置一个DIV块固定在屏幕中央(两种方法)
方法一:
对一个div进行以下设置即可实现居中。
<style>
#a{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
}
</style>
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
#a{
width: 200px;
height: 200px;
background-color: aquamarine;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
}
</style>
</head>
<body>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<div id="a">
sdvcdvf
</div>
</body>
</html>
全部代码Code
效果:
方法二:
使用js操作div的属性为下面这样即可实现居中。
<style>
#a{
width: 200px;
height: 200px;
background-color: aquamarine;
position: fixed;
}
</style> <script>
window.onload=function(){
var a = document.getElementById("a");//获取div块对象
var Height=document.documentElement.clientHeight;//取得浏览器页面可视区域的宽度
var Width=document.documentElement.clientWidth;//取得浏览器页面可视区域的宽度
var gao1 = a.offsetHeight;//获取div块的高度值
var gao2 = a.offsetWidth;//获取div块的宽度值
var Sgao1= (Height - gao1)/2+"px";
var Sgao2= (Width - gao2)/2+"px";
a.style.top=Sgao1;
a.style.left=Sgao2;
}
</script>
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
#a{
width: 200px;
height: 200px;
background-color: aquamarine;
position: fixed; }
</style>
<script>
window.onload=function(){
var a = document.getElementById("a");
var Height=document.documentElement.clientHeight;//取得浏览器页面可视区域的宽度
var Width=document.documentElement.clientWidth;//取得浏览器页面可视区域的宽度
var gao1 = a.offsetHeight;
var gao2 = a.offsetWidth;
var Sgao1= (Height - gao1)/2+"px";
var Sgao2= (Width - gao2)/2+"px";
a.style.top=Sgao1;
a.style.left=Sgao2;
}
</script>
</head>
<body>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<div id="a">
sdvcdvf
</div>
</body>
</html>
全部代码 Code
效果:
设置一个DIV块固定在屏幕中央(两种方法)的更多相关文章
- js设置控件的隐藏与显示的两种方法
js设置控件的隐藏与显示,设置控件style的display和visibility属性就可以了,下面有个示例,需要的朋友可以参考下用JavaScript隐藏控件的方法有两种,分别是通过设置控件的sty ...
- 牛客网:将两个单调递增的链表合并为一个单调递增的链表-Python实现-两种方法讲解
方法一和方法二的执行效率,可以大致的计算时间复杂度加以对比,方法一优于方法二 1. 方法一: 思路: 1. 新创建一个链表节点头,假设这里就叫 head3: 2. 因为另外两个链表都为单调递增,所 ...
- Codeforces Round #363 (Div. 2) C dp或贪心 两种方法
Description Vasya has n days of vacations! So he decided to improve his IT skills and do sport. Vasy ...
- php在数字前面补0得到固定长度数字的两种方法
比較基础,事实上两个内置函数都能实现. 1 sprintf 语法: string sprintf(string format, mixed [args]...); 返回值: 字符串 函数种类: 资料 ...
- 串口通信 之 linux固定串口别名的两种方法
转载:https://blog.csdn.net/beiguodexuecsdn/article/details/103099456 最近阅读的好文:https://blog.csdn.net/mrd ...
- 可采用两种方法得到一个EJB对象
(本文是转载其他人的技术文章,觉得说得挺浅显易懂,特借来学习) 在前面学习的例子中,只有一个EJB,但是对于一个真实的项目,EJB的数量可以有很多,而且EJB之间也会互相调用,那么在一个EJB ...
- 设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示;当页面滚动到起始位置时,头部div出现,底部div隐藏
设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...
- 怎样设置一个DIV在所有层的最上层,最上层DIV
怎样设置一个DIV在所有层的最上层,最上层DIV,其实很简单,只需要在这个DIV上使用这个样式即可,z-index:99999
- css实现div两列布局——左侧宽度固定,右侧宽度自适应(两种方法)
原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...
随机推荐
- python常用函数 C
1. Counter(hashable) 直接使用统计可哈希元素每个元素的数量. 2. most_common:可以统计数量最多的n个元素. from collections import Count ...
- str内部方法释义
1. __add__:字符串拼接 [示例]:>>> str1=‘good’>>> str1.__add__(‘morning’)>>> ‘good ...
- Relocation(状压DP)
Description Emma and Eric are moving to their new house they bought after returning from their honey ...
- HDU1021-Fibonacci Again,,找规律就好了~~~
Fibonacci Again Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- 机器学习基础-Logistic回归2
随机梯度上升法--一次仅用一个样本点来更新回归系数(因为可以在新样本到来时对分类器进行增量式更新,因而属于在线学习算法) 梯度上升法在每次更新回归系统时都需要遍历整个数据集,该方法在处理100个左右的 ...
- HDU 4418 高斯消元解决概率期望
题目大意: 一个人在n长的路径上走到底再往回,走i步停下来的概率为Pi , 求从起点开始到自己所希望的终点所走步数的数学期望 因为每个位置都跟后m个位置的数学期望有关 E[i] = sigma((E[ ...
- 【二分图匹配】E. 过山车
https://www.bnuoj.com/v3/contest_show.php?cid=9154#problem/E [题意] 裸的最大匹配 [教训] 一开始边数开了k,建的是无向图,结果T了,改 ...
- j_spring_security_check 404错误
折腾了好久,还是写一篇备忘 折腾了好久,还是写一篇备忘 首先检查路径 <form class="form-signin" method="POST" ac ...
- Minimum Spanning Tree.prim/kruskal(并查集)
开始了最小生成树,以简单应用为例hoj1323,1232(求连通分支数,直接并查集即可) prim(n*n) 一般用于稠密图,而Kruskal(m*log(m))用于系稀疏图 #include< ...
- linux 开机启动脚本或者服务
https://blog.csdn.net/zhuchunyan_aijia/article/details/53811368