之前有写过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. Camera 模组

    http://wenku.baidu.com/view/89d8c21014791711cc7917d5.html http://wenku.baidu.com/view/0cec54d5c1c708 ...

  2. excel 学习

    最近越來越感覺到熟練運用office軟件是一門很深的學問,以前一直忽視了這個技能,因爲從來都不覺得這個有什麼技術難度.正是因爲這樣想,所以才一直沒能去好好研究使用這套工具.現在卻覺得有必要學習,在於: ...

  3. php 文件压缩zip扩展

    <?php function addFileToZip($path, $zip) { $handler = opendir($path); //打开当前文件夹由$path指定. while (( ...

  4. Rod Johnson

    Spring Framework创始人,著名作者. Rod在悉尼大学不仅获得了计算机学位,同时还获得了音乐学位.更令人吃惊的是在回到软件开发领域之前,他还获得了音乐学的博士学位. 有着相当丰富的C/C ...

  5. Managing SQLite Database

    Approach #1: Use a Singleton to Instantiate the SQLiteOpenHelper Declare your database helper as a s ...

  6. Evernote相关技术介绍——mysql+lucene+tomcat

    Evernote服务 我们的服务由以下几个组件组成. 分片(NoteStore)   分片是Evernote服务的核心单元,用于存储用户的笔记.每个分片最多可以支撑30万个Evernote用户,并包含 ...

  7. 解耦与分离 —— 面向切面编程（AOP）

    家里的电表总结起来有两大特性: 电视机需要(电量管理),空调需要(电量管理),热水器也需要电量管理,即一组对象都需要某一功能特性: 电视机根据信号输出画面,空调吹出冷风,热水器将水加热,这些业务功能的 ...

  8. I.MX6 AW-NB177NF wifi reset

    /*********************************************************************** * I.MX6 AW-NB177NF wifi res ...

  9. 【SCOI 2005】 互不侵犯

    [题目链接] 点击打开链接 [算法] 和HDU2167类似 先搜出一行内符合的状态,然后,f[i][j][k]表示第i行,第j种状态,放了k个,合法的方案,DP即可 [代码] #include< ...

  10. robotframework收藏

    收藏文章 http://www.360doc.com/userhome/38592059