JS实现div居中示例


Posted in Javascript onApril 17, 2014
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>JS实现div居中</title> 
<style> 
/*外层div居中*/ 
#main { 
position: absolute; /*极为重要*/ 
background-color: blue; 
width:400px; 
height:200px; 
/*left:50%; 
top:50%; 
margin-left:-200px; 
margin-top:-100px;*/ 
border:1px solid #00F; 
} #content { 
position: absolute; /*极为重要*/ 
background-color: yellow; 
width: 200px; 
height: 100px; 
/*left:50%; 
top:50%; 
margin-left:-100px; 
margin-top:-50px;*/ 
/*div内部文字居中*/ 
text-align: center; 
line-height:100px; /*行间距和div宽度相同*/ 
} 
</style> 
<body> 
<div id="main"> 
<div id="content"> 
Sun 
</div> 
</div> 
<script type="text/javascript"> 
window.onload = function() { 
// 获取浏览器窗口 
var windowScreen = document.documentElement; 
// 获取main的div元素 
var main_div = document.getElementById("main"); 
// 通过窗口宽高和div宽高计算位置 
var main_left = (windowScreen.clientWidth - main_div.clientWidth)/2 + "px"; 
var main_top = (windowScreen.clientHeight - main_div.clientHeight)/2 + "px"; 
// 位置赋值 
main_div.style.left = main_left; 
main_div.style.top = main_top; 
// 获取mcontent的div元素 
var content_div = document.getElementById("content"); 
var content_left = (main_div.clientWidth - content_div.clientWidth)/2 + "px"; 
var content_top = (main_div.clientHeight - content_div.clientHeight)/2 + "px"; 
content_div.style.left = content_left; 
content_div.style.top = content_top; 
} 
</script> 
</body> 
</html>
Javascript 相关文章推荐
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
基于Bootstrap表单验证功能
Nov 17 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
使用Sonarqube扫描Javascript代码的示例
Dec 26 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 #Javascript
js调用后台、后台调用前台等方法总结
Apr 17 #Javascript
JS下载文件|无刷新下载文件示例代码
Apr 17 #Javascript
你可能不知道的JavaScript的new Function()方法
Apr 17 #Javascript
在JS中解析HTML字符串示例代码
Apr 16 #Javascript
iframe的onreadystatechange事件在firefox下的使用
Apr 16 #Javascript
javascript打开word文档的方法
Apr 16 #Javascript
You might like
PHP简单系统数据添加以及数据删除模块源文件下载
2008/06/07 PHP
PHP sleep()函数, usleep()函数
2016/08/25 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
php微信开发之图片回复功能
2018/06/14 PHP
jscript之List Excel Color Values
2007/06/13 Javascript
Javascript操作cookie的函数代码
2012/10/03 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
jquery对Json的各种遍历方法总结(必看篇)
2016/09/29 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
js中less常用的方法小结
2017/08/09 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
JS扩展String.prototype.format字符串拼接的功能
2018/03/09 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
element中的$confirm的使用
2020/04/26 Javascript
精读《Vue3.0 Function API》
2020/05/20 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
一些常用的Python爬虫技巧汇总
2016/09/28 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
利用Python的folium包绘制城市道路图的实现示例
2020/08/24 Python
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
星空联盟C# .net笔试题
2014/12/05 面试题
林肯就职演讲稿
2014/05/19 职场文书
单位作风建设自查报告
2014/10/23 职场文书
会计入职心得体会
2016/01/22 职场文书
Django debug为True时,css加载失败的解决方案
2021/04/24 Python
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL