之前有写过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网络编程（三）Volley使用方法全解析

    相关文章 Android网络编程(一)HTTP协议原理 Android网络编程(二)HttpClient与HttpURLConnection 前言 Volley想必许多人都用过,为了建立网络编程的知识 ...

  2. win7 32位下安装MySQL出现的---1067系统错误---问题及解决

    每次安装数据库,总是出现这样那样的问题.如今记录下来,供日后參考咯.... 下载的是解压缩-zip版本号的.安装配置教程參照洪哥笔记文章-<MySQL-5.6.13解压版(zip版)安装配置教程 ...

  3. Educational Codeforces Round 18 C. Divide by Three DP

    C. Divide by Three   A positive integer number n is written on a blackboard. It consists of not more ...

  4. HDU1698 Just a Hook —— 线段树 区间染色

    题目链接:https://vjudge.net/problem/HDU-1698 In the game of DotA, Pudge’s meat hook is actually the most ...

  5. YTU 2975: 我的编号

    2975: 我的编号 时间限制: 1 Sec  内存限制: 128 MB 提交: 42  解决: 15 题目描述 建立一个学生链表,每个链表结点含有学生的基本信息,编号和姓名.现在n个学生站成一列,根 ...

  6. [转]RF+Selenium2Library元素定位不到的问题

    原文地址:http://m.blog.csdn.net/m0_37553368/article/details/78016729 在基于RobotFramework框架使用Selenium2Libra ...

  7. Bootstrap指定表格字段宽度

    默认情况下,表格会占据屏幕所有宽度,可以使用bootstrap的布局功能.但表格标题字段的宽度必须与相应字段内容的宽度一致. <div class="container"&g ...

  8. 修复win7的启动引导

    自己的电脑上本身是win7,为了试验openstack,决定装个ubuntu server,过程也不太懂,一直卡在分区不敢贸然前进,反复了几次,终于导致我进不了原来的win7,原因不明! 当时就慌了, ...

  9. rpm安装总结(转载)

    转自:http://www.cnblogs.com/nuke/archive/2009/03/03/1402067.html 在RedHat Linux和Mandrake等兼容RedHat的发行版中, ...

  10. Linux 常用命令十六 文件权限管理

    一.ls -l 各段含义 wang@wang:~/workpalce/threading$ ls -l 总用量 drwxrwxr-x wang wang 12月 : a -rw-rw-r-- wang ...