之前有写过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. Android之——AIDL深入

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/47071927 在上一篇博文<Android之--AIDL小结>中,我们 ...

  2. 反射学习总结 --为理解SpringMVC底层做准备

    反射是什么? 通俗理解 - 照X光. java:一个类在反射面前就像照X光,清清楚楚明明白白. 应用:我们的ide中,能够"."一下就知道类中的所有方法就是通过反射实现的. XML ...

  3. C语言的各种位运算符的操作简述

    运算符: 算术运算符: + , - , * , / , % , ++ , -- 符合运算符: += , *= , /= , %= 条件运算符:  ? : 关系运算符: == , >= , < ...

  4. JNI/NDK开发指南(2)

    1.生成动态库.so,存放于手机的system/lib/中(APP怎样将.so存入该文件夹,奇怪?????),Java层调用JNI的类会运行静态代码System.loadLibrary("* ...

  5. mysql备份及还原

    mysql怎样复制数据库?或者说,将数据库拷贝到另外一台机? 按照我的理解,复制数据库,如果是: 1.直接拷贝数据库文件,应该先停数据服务,否则拷不出来.但是,生产机器,哪能说停就停呢? 2.在线拷贝 ...

  6. CXF 中自定义SOAPHeader

    Interceptor是CXF架构中一个很有特色的模式.你可以在不对核心模块进行修改的情况下,动态添加很多功能.这对于CXF这个以处理消息为中心的服务框架来说是非常有用的,CXF通过在Intercep ...

  7. jQuery简单纯文字提示条

    如何制作jQuery简单纯文字提示条,先介绍提示条(tooltip)的意思是用户鼠标悬停经过事件发生提示title.它们已经呈现在大多数浏览器中,当你可以提供一个链接或图片的title属性,就是用户将 ...

  8. 源代码管理工具SVN

    1.源代码管理工具概述 2_SVN常用指令.hm Checkout把整个项目所有的源代码从服务器下载到本地 Update:将服务器上的代码更新到本地(只会更新被修改的文件) Commit:将本地的修改 ...

  9. I.MX6 Android can-utils 移植

    /******************************************************************* * I.MX6 Android can-utils 移植 * ...

  10. bzoj4260 REBXOR——Trie树

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4260 对于每个位置,求一个前缀最大值和后缀最大值: 也就是从1到 i 的异或和要找前面某处的 ...