之前有写过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. [Spring实战系列]（19）Servlet不同版本号之间的差别

    1.   2.3版本号 2.3版本号 <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application ...

  2. mysql + Fluently NHibernate + WebAPI + Autofac

    MySQL.Fluently NHibernate.WebAPI.Autofac,对我来说每一个都是麻烦疙瘩,现在它们为了一个共同的项目而凑合到一起了.一路磕磕碰碰,现在貌似有了一点眉目. 作为一个步 ...

  3. HttpWebRequest中的ContentType详解

    1.参考网络资源: http://blog.csdn.net/blueheart20/article/details/45174399  ContentType详解 http://www.tuicoo ...

  4. Ant 打包 问题

    Ant 打包问题及解决归纳总结: 1.build.xml注意设置basedir: <project name="s2si"  default="dist" ...

  5. caution

    做好需求更改的准备,提高代码的扩展性和可维护性:预留出修改bug和需求的时间:对需求理解透彻再开始写代码:代码不要写死,防止需求变动. 

  6. (22) java web的struts2框架的使用-struts配置文件

    1,配置文件的引用 struts中配置文件可以有多个,每个模块的包里面都可以单独设立一个struts配置文件. 主的配置文件,放在“src”文件夹下,可以引入其他配置文件,引入方式: <!-- ...

  7. (21) java web的struts2框架的使用-Action实现的三种方式

    上一篇介绍了struts使用的四个步骤. 其中在开发action的时候,可以有三种实现方式: 1,写一个类,继承与ActionSupport 2,写一个类,实现Action接口 3,写一个类,实现业务 ...

  8. Lightoj 1019 - Brush (V)

    算出从点1到点n的最短路径. /* *********************************************** Author :guanjun Created Time :2016 ...

  9. HDU4009 Transfer water —— 最小树形图 + 不定根 + 超级点

    题目链接:https://vjudge.net/problem/HDU-4009 Transfer water Time Limit: 5000/3000 MS (Java/Others)    Me ...

  10. YTU 1002: Home Work

    1002: Home Work 时间限制: 1000 Sec  内存限制: 64 MB 提交: 288  解决: 41 题目描述 临近开学了,大家都忙着收拾行李准备返校,但I_Love_C却不为此担心 ...