之前有写过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实现元素水平垂直居中的更多相关文章

  1. 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点？ 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝

    第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...

  2. CSS元素水平垂直居中方法总结（主要对大漠以及张鑫旭博客所述方法进行了归纳）

    本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE ...

  3. IE6+未知尺寸元素水平垂直居中

    首先讨论在IE8以上(也就是支持伪元素after的基础上)的2种情况 当有一段不知道长度大小的文字在你面前,你需要使它垂直居中的时候,你肯定会想到:1.text-align:center;水平居中没错 ...

  4. css中元素水平垂直居中4种方法介绍

    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...

  5. 【Web】CSS实现绝对定位元素水平垂直居中

    网页中常常需用让绝对定位元素水平垂直居中,下面介绍2种方法: 一 元素宽度未知 <!DOCTYPE html> <html lang="en"> <h ...

  6. CSS未知宽高元素水平垂直居中

    方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...

  7. 05. flex元素水平垂直居中（三种position水平垂直居中和两种新老版本水平垂直居中）

    flex元素水平垂直居中(三种position水平垂直居中和两种新老版本水平垂直居中) (1).position : <!DOCTYPE html> <html lang=" ...

  8. css 实现元素水平垂直居中总结5中方法

    个人总结,如有错误请指出,有好的建议请留言.o(^▽^)o 一.margin:0 auto:text-align:center:line-height方法 <div id="divAu ...

  9. Middle-help 终极实现元素水平垂直居中

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

随机推荐

  1. C实现头插法和尾插法来构建单链表（不带头结点）

    链表的构建事实上也就是不断插入节点的过程.而节点的插入能够分为头插法和尾插法. 头插法就是在头结点后插入该节点,始终把该节点作为第一个节点.尾插法就是在链表的最后一个节点处插入元素,作为最后一个节点. ...

  2. 适合初学C语言是练习的代码

    作为一个小白,自己学C的时候就想找些代码练练手,就整理了一些. 1.最大公约数和最小公倍数 # include <stdio.h> int main(void) {     int i, ...

  3. 怎样在 AutoLayout 中使用 UIScrollView (多个ContentView)

    http://codehappily.wordpress.com/2013/11/14/ios-how-to-use-uiscrollview-with-autolayout-pure-autolay ...

  4. 【CSS3动画实战】Mailman Icon

    周末闲来无事,就想着做点东西练练手.又苦于自己 PS 水平太差,设计不出什么好看的东西. 干脆就在 Dribbble 上逛一逛,看看有什么看起来比较屌的,实际上却很简单的东西. 一共做了 3 个,均已 ...

  5. 生成随机string

    转自:http://blog.csdn.net/yaodong_y/article/details/8115250 字母与数字的ASCII码 目 前计算机中用得最广泛的 字符集及其编码,是由美国国家标 ...

  6. 我的Android进阶之旅------&gt;Android编译错误java.util.zip.ZipException: duplicate entry的解决方法

    今天在Android Studio中把另外一个项目引入当前项目,编译的时候出现了java.util.zip.ZipException: duplicate entry错误. 错误例如以下所看到的: F ...

  7. Oracle可插拔数据库的jdbc连接串写法

    我在服务器上部署某个第三方系统的数据库的时候,服务器数据库版本为oracle 12c.我采用的方式是新建了一个实例.访问正常. 后来项目的负责人告诉我,oracle12C支持所谓的可插拔数据库.可插拔 ...

  8. is id() == 从内存的最小化占用角度解释 我是孕育者，我也应该这样设计 变，必然伴随着加法 一个list是否可以执行set()

    def f(a, b): print(a is b, b is a, a == b, a.__eq__(b), id(a), id(b)) f(2, 2) f([2], [2]) f('2', '2' ...

  9. 在Eclipse中tomcat 内存配置

    修改1: 在Eclipse中下面Servers双击Tomcat Server... 然后点击General InformAtion 下的Open launch configuration: 会弹出Ed ...

  10. I.MX6 Android CAN 命令行测试

    /********************************************************************* * I.MX6 Android CAN 命令行测试 * 说 ...