js实现元素水平垂直居中
之前有写过css/css3实现元素的水平和垂直居中的几种方法点我，但是css3属性不是所有浏览器都能兼容的，今天写下js实现未知宽高的元素的水平和垂直居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
padding:50px;
display: inline-block;
background-color:pink;
position: absolute;
}
</style>
<script>
window.onload = function(){
// 获取元素
var div = document.querySelector('div');
// 设置left
div.style.left=(window.innerWidth - div.offsetWidth)/2 + 'px';
// 设置top
div.style.top= (window.innerHeight- div.offsetHeight)/2 + 'px';
}
</script>
</head>
<body>
<div>
陌上人如玉
<br />
公子士无双
</div>
</body>
</html>
如果需要在有滚动条的情况的下要实现居中的效果，则需要加上scrollTop和scrollLeft。
js实现元素水平垂直居中的更多相关文章
- 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点？ 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝
第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...
- CSS元素水平垂直居中方法总结（主要对大漠以及张鑫旭博客所述方法进行了归纳）
本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE ...
- IE6+未知尺寸元素水平垂直居中
首先讨论在IE8以上(也就是支持伪元素after的基础上)的2种情况 当有一段不知道长度大小的文字在你面前,你需要使它垂直居中的时候,你肯定会想到:1.text-align:center;水平居中没错 ...
- css中元素水平垂直居中4种方法介绍
table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...
- 【Web】CSS实现绝对定位元素水平垂直居中
网页中常常需用让绝对定位元素水平垂直居中,下面介绍2种方法: 一 元素宽度未知 <!DOCTYPE html> <html lang="en"> <h ...
- CSS未知宽高元素水平垂直居中
方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...
- 05. flex元素水平垂直居中（三种position水平垂直居中和两种新老版本水平垂直居中）
flex元素水平垂直居中(三种position水平垂直居中和两种新老版本水平垂直居中) (1).position : <!DOCTYPE html> <html lang=" ...
- css 实现元素水平垂直居中总结5中方法
个人总结,如有错误请指出,有好的建议请留言.o(^▽^)o 一.margin:0 auto:text-align:center:line-height方法 <div id="divAu ...
- Middle-help 终极实现元素水平垂直居中
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
随机推荐
- 那条linq语句为啥这么慢
目前所在的项目大量使用了linq,结果有个地方出现了严重的性能问题.一个统计需要3.40秒.头头焦头烂额之际,也让我看看. 我向来喜欢性能调优,自诩编码极为注重性能.曾几何时,也动不动就把性能挂在嘴边 ...
- ul、li中的DIV垂直居中
当li高度可动态改变时,li中的DIV始终保持垂直居中. 由于高度不固定,不能用margin或者padding解决. 最头疼的是vertical-align: middle;也莫名其妙的失效了. 最终 ...
- ou've likely run out of ephemeral ports on your system
redis.exceptions.ConnectionError: Error 99 connecting to 127.0.0.1:6379. Cannot assign requested add ...
- The android gradle plugin version 2.3.0-beta2 is too old, please update to the latest version.
编译项目的时候,报如下错误: Error:(, ) A problem occurred evaluating project ':app'. > Failed to apply plugin ...
- CentOS7.2 设置GRUB2引导界面分辨率
最近在学习OS引导启动,GRUB2的学习材料也不少,主要还看官方手册清晰些. 公司里办公机的多启动用的ubuntu的界面,还挺炫酷的.之前看其他博客网文里看到可以设置grub2的分辨率,我拿CentO ...
- [HNOI 2007] 紧急疏散
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1189 [算法] 首先 , 答案具有单调性 , 不妨二分答案” 第mid秒是否可以完成 ...
- JQuery报表工具
推荐18个基于 HTML5 Canvas 开发的图表库 如今,HTML5 可谓如众星捧月一般,受到许多业内巨头的青睐.很多Web开发者也尝试着用 HTML 5 来制作各种各样的富 Web 应用.H ...
- appium学习【三】：截图时，图片命令中包含当前的函数名，以区分错误是在哪个函数报的
import sys funcName = sys._getframe().f_back.f_code.co_name #获取调用函数名 print sys._getframe().f_code.co ...
- CodeForces 722B Verse Pattern (水题)
题意:统计元音,这里多加一个元音,y. 析:直接统计就好了. 代码如下: #pragma comment(linker, "/STACK:1024000000,1024000000" ...
- bzoj3316: JC loves Mkk（单调队列+分数规划）
Description Input 第1行,包含三个整数.n,L,R.第2行n个数,代表a[1..n]. Output 仅1行,表示询问答案.如果答案是整数,就输出整数:否则,输出既约分数“P/Q”来 ...